<section class="ai-hero-carousel ai-component">
<div class="ai-container">
<h1 class="">What dreams are made of</h1>
</div>
<div class="ai-hero-carousel-wrapper">
<div class="carousel-cell" style="background-image:url('../../images/bitmap/explore-new.jpg');">
<div class="ai-hero-carousel-mobile-image" style="background-image:url('../../images/bitmap/mobile-explore-new.jpg');"></div>
<div class="inner">
<hgroup class="">
<h2 class="text-white">Exploring new worlds</h2>
<p class="text-white">What magical places might we find if only we knew where to look? And how to look.</p>
</hgroup>
</div>
</div>
<div class="carousel-cell" style="background-image:url('../../images/bitmap/elephant.jpg');">
<div class="ai-hero-carousel-mobile-image" style="background-image:url('../../images/bitmap/mobile-elephant.jpg');"></div>
<div class="inner">
<hgroup class="">
<h2 class="text-white">Talking with elephants</h2>
<p class="text-white">What do they think about? What do they think of us? Do they laugh at the same things as me? Do they understand other animals?</p>
</hgroup>
</div>
</div>
<div class="carousel-cell" style="background-image:url('../../images/bitmap/extraordinary.jpg');">
<div class="ai-hero-carousel-mobile-image" style="background-image:url('../../images/bitmap/mobile-extraordinary.jpg');"></div>
<div class="inner">
<hgroup class="">
<h2 class="text-white">Turning ordinary into extraordinary</h2>
<p class="text-white">What if school wasn't in a classroom? What if it could be anywhere? Like science at the bottom of the sea?</p>
</hgroup>
</div>
</div>
<div class="carousel-cell" style="background-image:url('../../images/bitmap/beyound-class.jpg');">
<div class="ai-hero-carousel-mobile-image" style="background-image:url('../../images/bitmap/mobile-beyound-class.jpg');"></div>
<div class="inner">
<hgroup class="">
<h2 class="text-white">Beyond the classroom</h2>
<p class="text-white">No gravity. No classrooms. No desks. No books. What would we do for lunch?</p>
</hgroup>
</div>
</div>
</div>
</section>
<section class="ai-hero-carousel ai-component">
<div class="ai-container">
<h1 class="">{{{heading}}}</h1>
</div>
{{#if slides}}
<div class="ai-hero-carousel-wrapper">
{{#each slides}}
<div class="carousel-cell" style="background-image:url('{{{path image}}}');">
{{#if mobileimage}}
<div class="ai-hero-carousel-mobile-image" style="background-image:url('{{{path mobileimage}}}');"></div>
{{/if}}
<div class="inner">
<hgroup class="">
<h2 class="text-white">{{{heading}}}</h2>
<p class="text-white">{{{text}}}</p>
</hgroup>
</div>
</div>
{{/each}}
</div>
{{/if}}
</section>
{
"heading": "What dreams are made of",
"slides": [
{
"image": "/images/bitmap/explore-new.jpg",
"mobileimage": "/images/bitmap/mobile-explore-new.jpg",
"heading": "Exploring new worlds",
"text": "What magical places might we find if only we knew where to look? And how to look."
},
{
"image": "/images/bitmap/elephant.jpg",
"mobileimage": "/images/bitmap/mobile-elephant.jpg",
"heading": "Talking with elephants",
"text": "What do they think about? What do they think of us? Do they laugh at the same things as me? Do they understand other animals?"
},
{
"image": "/images/bitmap/extraordinary.jpg",
"mobileimage": "/images/bitmap/mobile-extraordinary.jpg",
"heading": "Turning ordinary into extraordinary",
"text": "What if school wasn't in a classroom? What if it could be anywhere? Like science at the bottom of the sea?"
},
{
"image": "/images/bitmap/beyound-class.jpg",
"mobileimage": "/images/bitmap/mobile-beyound-class.jpg",
"heading": "Beyond the classroom",
"text": "No gravity. No classrooms. No desks. No books. What would we do for lunch?"
}
]
}
// hero carousel
const heroCarousel = {
init() {
if(document.querySelector('.ai-hero-carousel-wrapper')){
let elems = document.getElementsByClassName('ai-hero-carousel-wrapper');
for (let i = 0; i < elems.length; i++) {
let hcFlkty = new Flickity( elems[i], {
pageDots: false,
prevNextButtons: true,
wrapAround: true,
autoPlay: false,
imagesLoaded: true
});
}
}
}
};
heroCarousel.init();
export default heroCarousel;
// hero carousel
section{
&.ai-hero-carousel{
h1{
padding: 4rem 0 2rem 0;
margin: 0;
@media (min-width: $large) {
padding: 4rem 0 2rem 0;
}
}
.ai-hero-carousel-wrapper{
width: 100%;
height: 500px;
.carousel-cell{
width: 100%;
height: 500px;
background-size: cover;
background-repeat: no-repeat;
.ai-hero-carousel-mobile-image{
display: block;
position: absolute;
z-index: 5;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 100%;
height: 100%;
@media (min-width: $medium) {
display: none;
}
}
.inner{
max-width: $large;
margin: 0 auto;
height: 100%;
display: flex;
align-items: end;
padding-left: 20px;
padding-right: 20px;
position: relative;
z-index: 6;
hgroup{
padding: 1rem 0 4.5rem 0;
@media (min-width: $large) {
max-width: 40%;
padding: 2rem 0 3rem 0;
}
h2{
margin: 0;
padding: 0 0 0.5rem 0;
@media (min-width: $large) {
padding: 0 0 2rem 0;
}
}
}
}
}
.flickity-prev-next-button{
top: unset;
bottom: 25px;
@media (min-width: $large) {
bottom: unset;
top: calc(50% - 25px);
}
&.previous{
left: 20px;
}
&.next{
right: 20px;
}
}
}
}
}
No notes defined.