<section class="ai-innovator-carousel ai-component">
<div class="ai-container">
<div class="ai-width-m ai-m-auto">
<h2 class="h3">Meet the global AI innovators working to transform industries and shape new ones</h2>
<div class="ai-w-75">
<p>Bold. Transformative. Inspired. SoftBank has been partnering with extraordinary entrepreneurs to build lasting companies for more than 25 years.Tincidunt magnis sed lacus tortor. Et duis mollis id adipiscing. Platea eros mauris ullamcorper ullamcorper egestas hac. Eu ante duis dignissim bibendum integer ac. Facilisi enim sodales est dui. Blandit est interdum at enim. Massa mattis ullamcorper metus habitant senectus dictum porttitor et.</p>
</div>
<a class="ai-btn ai-btn-primary" href="">SoftBank Vision Fund</a>
</div>
</div>
<div class="ai-innovator-carousel-wrapper">
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-1.jpg" />
<p class="bold text-grey">Education & learning</p>
<p class="bold">Stephanie Sohn,</p>
<p class="bold">Product Lead at Riiid</p>
</div>
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-2.jpg" />
<p class="bold text-grey">Education & learning</p>
<p class="bold">Alex Hatvany,</p>
<p class="bold">Co-Founder at Atom Learning</p>
</div>
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-3.jpg" />
<p class="bold text-grey">Education & learning</p>
<p class="bold">Alex Hatvany,</p>
<p class="bold">Co-Founder at Atom Learning</p>
</div>
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-4.jpg" />
<p class="bold text-grey">Relationships & social interactions</p>
<p class="bold">Alex Hatvany,</p>
<p class="bold">Co-Founder at Atom Learning</p>
</div>
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-1.jpg" />
<p class="bold text-grey">Education & learning</p>
<p class="bold">Stephanie Sohn,</p>
<p class="bold">Product Lead at Riiid</p>
</div>
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-2.jpg" />
<p class="bold text-grey">Education & learning</p>
<p class="bold">Alex Hatvany,</p>
<p class="bold">Co-Founder at Atom Learning</p>
</div>
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-3.jpg" />
<p class="bold text-grey">Education & learning</p>
<p class="bold">Alex Hatvany,</p>
<p class="bold">Co-Founder at Atom Learning</p>
</div>
<div class="carousel-cell">
<img class="" alt="" src="../../images/bitmap/testimonial-4.jpg" />
<p class="bold text-grey">Relationships & social interactions</p>
<p class="bold">Alex Hatvany,</p>
<p class="bold">Co-Founder at Atom Learning</p>
</div>
</div>
</section>
<section class="ai-innovator-carousel ai-component">
<div class="ai-container">
<div class="ai-width-m ai-m-auto">
<h2 class="h3">{{{heading}}}</h2>
<div class="ai-w-75">
<p>{{{text}}}</p>
</div>
{{> '@button-primary' button-primary}}
</div>
</div>
{{#if slides}}
<div class="ai-innovator-carousel-wrapper">
{{#each slides}}
<div class="carousel-cell">
<img class="" alt="" src="{{{path image}}}"/>
<p class="bold text-grey">{{{category}}}</p>
<p class="bold">{{{name}}}</p>
<p class="bold">{{{title}}}</p>
</div>
{{/each}}
</div>
{{/if}}
</section>
{
"heading": "Meet the global AI innovators working to transform industries and shape new ones",
"text": "Bold. Transformative. Inspired. SoftBank has been partnering with extraordinary entrepreneurs to build lasting companies for more than 25 years.Tincidunt magnis sed lacus tortor. Et duis mollis id adipiscing. Platea eros mauris ullamcorper ullamcorper egestas hac. Eu ante duis dignissim bibendum integer ac. Facilisi enim sodales est dui. Blandit est interdum at enim. Massa mattis ullamcorper metus habitant senectus dictum porttitor et.",
"button-primary": {
"text": "SoftBank Vision Fund",
"class": "ai-btn-primary"
},
"slides": [
{
"image": "/images/bitmap/testimonial-1.jpg",
"category": "Education & learning",
"name": "Stephanie Sohn,",
"title": "Product Lead at Riiid"
},
{
"image": "/images/bitmap/testimonial-2.jpg",
"category": "Education & learning",
"name": "Alex Hatvany,",
"title": "Co-Founder at Atom Learning"
},
{
"image": "/images/bitmap/testimonial-3.jpg",
"category": "Education & learning",
"name": "Alex Hatvany,",
"title": "Co-Founder at Atom Learning"
},
{
"image": "/images/bitmap/testimonial-4.jpg",
"category": "Relationships & social interactions",
"name": "Alex Hatvany,",
"title": "Co-Founder at Atom Learning"
},
{
"image": "/images/bitmap/testimonial-1.jpg",
"category": "Education & learning",
"name": "Stephanie Sohn,",
"title": "Product Lead at Riiid"
},
{
"image": "/images/bitmap/testimonial-2.jpg",
"category": "Education & learning",
"name": "Alex Hatvany,",
"title": "Co-Founder at Atom Learning"
},
{
"image": "/images/bitmap/testimonial-3.jpg",
"category": "Education & learning",
"name": "Alex Hatvany,",
"title": "Co-Founder at Atom Learning"
},
{
"image": "/images/bitmap/testimonial-4.jpg",
"category": "Relationships & social interactions",
"name": "Alex Hatvany,",
"title": "Co-Founder at Atom Learning"
}
]
}
// landscape carousel
const innovatorCarousel = {
init() {
if(document.querySelector('.ai-innovator-carousel-wrapper')){
let elems = document.getElementsByClassName('ai-innovator-carousel-wrapper');
for (let i = 0; i < elems.length; i++) {
let count = elems[i].childElementCount;
if(count > 4){
elems[i].classList.add('ai-innovator-carousel-wrapper-dt');
} else{
elems[i].classList.add('ai-innovator-carousel-wrapper-mb');
}
}
if(document.querySelector('.ai-innovator-carousel-wrapper-dt')){
let carousels = document.getElementsByClassName('ai-innovator-carousel-wrapper-dt');
for (let i = 0; i < carousels.length; i++) {
let lsFlkty = new Flickity( carousels[i], {
pageDots: false,
prevNextButtons: true,
wrapAround: true,
autoPlay: false,
imagesLoaded: true
});
}
}
if(document.querySelector('.ai-innovator-carousel-wrapper-mb')){
let carousels = document.getElementsByClassName('ai-innovator-carousel-wrapper-mb');
for (let i = 0; i < carousels.length; i++) {
if(carousels[i].childElementCount > 1){
let lsFlkty = new Flickity( carousels[i], {
pageDots: false,
prevNextButtons: true,
wrapAround: true,
autoPlay: false,
imagesLoaded: true,
watchCSS: true
});
}
}
}
}
}
};
innovatorCarousel.init();
export default innovatorCarousel;
// innovator carousel
section{
&.ai-innovator-carousel{
padding: 2rem 0;
border-top: 7px solid $lightgrey;
h2{
padding-bottom: 1rem;
}
.ai-btn{
margin-top: 1rem;
}
.ai-innovator-carousel-wrapper{
width: 100%;
padding: 3rem 0 3rem 0;
&.ai-innovator-carousel-wrapper-mb{
@media (min-width: $medium) {
display: flex;
justify-content: center;
}
&:after{
@media (max-width: $medium) {
content: 'flickity';
display: none; // hide :after
}
}
}
@media (min-width: $large) {
padding: 4rem 0 4rem 0;
}
.carousel-cell{
padding: 0 1.5rem;
width: 100%;
@media (min-width: $medium) {
width: calc(100% / 3);
}
@media (min-width: $large) {
width: 25%;
}
img{
margin-bottom: 1rem;
}
p{
padding: 0;
margin: 0;
}
}
.flickity-prev-next-button{
top: unset;
bottom: 0;
@media (min-width: $large) {
bottom: 0;
}
&.previous{
left: calc(50% - 60px);
background-image: url('../images/icons/ai-carousel-left-black.svg');
}
&.next{
right: calc(50% - 60px);
background-image: url('../images/icons/ai-carousel-right-black.svg');
}
}
}
}
}
No notes defined.