<section class="ai-landscape-carousel ai-component">
<div class="ai-container">
<h2 class="h5 sub-heading">Education & learning</h2>
<div class="ai-landscape-carousel-wrapper">
<div class="carousel-cell">
<img alt="slide" src="../../images/bitmap/slide-1.jpg" />
</div>
<div class="carousel-cell">
<img alt="slide" src="../../images/bitmap/slide-2.jpg" />
</div>
</div>
<div class="copy ai-d-flex">
<div class="ai-w-50">
<h3 class="h3">Exploring new worlds</h2>
</div>
<div class="ai-w-50">
<div class="ai-w-75">
<p>What magical places might we find if only we knew where to look? And how to look. </p>
</div>
<a class="ai-btn ai-btn-primary" href="">Read more</a>
</div>
</div>
</div>
</section>
<section class="ai-landscape-carousel ai-component">
<div class="ai-container">
<h2 class="h5 sub-heading">{{{heading}}}</h2>
{{#if slides}}
<div class="ai-landscape-carousel-wrapper">
{{#each slides}}
<div class="carousel-cell">
<img alt="slide" src="{{{path image}}}"/>
</div>
{{/each}}
</div>
{{/if}}
<div class="copy ai-d-flex">
<div class="ai-w-50">
<h3 class="h3">{{{subheading}}}</h2>
</div>
<div class="ai-w-50">
<div class="ai-w-75">
<p>{{{text}}}</p>
</div>
{{> '@button-primary' button-primary}}
</div>
</div>
</div>
</section>
{
"heading": "Education & learning",
"subheading": "Exploring new worlds",
"text": "What magical places might we find if only we knew where to look? And how to look. ",
"link-text": "Read more",
"link": "https://softbank-3pcx4.kinsta.page/index.html",
"slides": [
{
"image": "/images/bitmap/slide-1.jpg"
},
{
"image": "/images/bitmap/slide-2.jpg"
}
],
"button-primary": {
"text": "Read more",
"class": "ai-btn-primary"
}
}
// landscape carousel
const landscapeCarousel = {
init() {
if(document.querySelector('.ai-landscape-carousel-wrapper')){
let elems = document.getElementsByClassName('ai-landscape-carousel-wrapper');
for (let i = 0; i < elems.length; i++) {
let count = elems[i].children.length;
if(count > 1){
let lsFlkty = new Flickity( elems[i], {
pageDots: true,
prevNextButtons: false,
wrapAround: true,
autoPlay: false,
imagesLoaded: true
});
}
}
}
}
};
landscapeCarousel.init();
export default landscapeCarousel;
// landscape carousel
section{
&.ai-landscape-carousel{
padding: 2rem 0;
@media (min-width: $large) {
padding: 2rem 0;
}
h2{
padding: 0 0 1rem 0;
}
img{
display: block;
}
.ai-landscape-carousel-wrapper{
width: 100%;
}
.flickity-page-dots{
bottom: 0.5rem;
right: 0.5rem;
padding: 0.45rem 0.25rem;
width: auto;
@media (min-width: $large) {
bottom: 1rem;
right: 1rem;
}
&:before{
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid $white;
border-radius: 30px;
}
.flickity-page-dot{
z-index: 2;
background-color: $white;
opacity: 0.5;
margin: 0 0.4rem;
&.is-selected{
opacity: 1;
}
&:focus{
box-shadow: none;
}
}
}
.copy{
padding: 1rem 0 0 0;
h3{
padding-bottom: 0.5rem;
}
.ai-btn{
margin-top: 1rem;
}
}
}
}
No notes defined.