<link media="all" rel="stylesheet" href="/assets/themes/default/css/image-and-card-slider.css?cb=">
<div class="image-and-card-slider" data-module="imageAndCardSlider">
<div class="image-and-card-slider__image">
<div class="image-and-card-slider__image js-main-active-image active js-main-image" style="background-image: url('https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"></div>
<div class="image-and-card-slider__image js-main-inactive-image inactive js-main-image"></div>
<a href='#' class="image-and-card-slider__arrow image-and-card-slider__arrow--left js-arrow-left"><span>Previous</span> </a>
<a href='#' class="image-and-card-slider__arrow image-and-card-slider__arrow--right js-arrow-right"><span>Next</span> </a>
</div>
<div class="image-and-card-slider__cards js-cards">
<div data-card-index="0" class="image-and-card-slider-card js-card active" data-main-image="https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" data-module="card">
<div class="image-and-card-slider-card__image">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/image.css?cb=">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<img src="https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="image-and-card-slider-card__content">
<h3 class="image-and-card-slider-card__title">Lorem Ipsum</h3>
<div class="image-and-card-slider-card__body">
<div class="richtext">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
</div>
</div>
<div class="image-and-card-slider-card__cta-container">
<a href="#" class="image-and-card-slider-card__primary-cta">Click here</a>
</div>
</div>
</div>
<div data-card-index="1" class="image-and-card-slider-card js-card " data-main-image="https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80" data-module="card">
<div class="image-and-card-slider-card__image">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80" />
<img src="https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80" loading="lazy" alt="">
</picture>
</div>
</div>
<div class="image-and-card-slider-card__content">
<h3 class="image-and-card-slider-card__title">Lorem Ipsum</h3>
<div class="image-and-card-slider-card__body">
<div class="richtext">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
</div>
</div>
<div class="image-and-card-slider-card__cta-container">
<a href="#" class="image-and-card-slider-card__primary-cta">Click here</a>
</div>
</div>
</div>
<div data-card-index="2" class="image-and-card-slider-card js-card " data-main-image="https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80" data-module="card">
<div class="image-and-card-slider-card__image">
<div class="image ">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80" />
<img src="https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80" loading="lazy" alt="">
</picture>
</div>
</div>
<div class="image-and-card-slider-card__content">
<h3 class="image-and-card-slider-card__title">Lorem Ipsum</h3>
<div class="image-and-card-slider-card__body">
<div class="richtext">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>
</div>
</div>
<div class="image-and-card-slider-card__cta-container">
<a href="#" class="image-and-card-slider-card__primary-cta">Click here</a>
</div>
</div>
</div>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/image-and-card-slider.css?cb={{cacheBuster}}">
{{/if}}
<div class="image-and-card-slider" data-module="imageAndCardSlider">
{{#if cards.length}}
<div class="image-and-card-slider__image">
<div class="image-and-card-slider__image js-main-active-image active js-main-image" style="background-image: url('{{cards.0.mainImage.src}}')"></div>
<div class="image-and-card-slider__image js-main-inactive-image inactive js-main-image"></div>
<a href='#' class="image-and-card-slider__arrow image-and-card-slider__arrow--left js-arrow-left"><span>Previous</span> </a>
<a href='#' class="image-and-card-slider__arrow image-and-card-slider__arrow--right js-arrow-right"><span>Next</span> </a>
</div>
<div class="image-and-card-slider__cards js-cards">
{{#each cards}}
{{> @slider-card}}
{{/each}}
</div>
{{/if}}
</div>
{
"theme": "default",
"firstInstance": true,
"title": "Image & Card Slider",
"cards": [
{
"mainImage": {
"src": "https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
},
"image": {
"firstInstance": true,
"theme": "default",
"altText": "Image Alt Text",
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1502208327471-d5dde4d78995?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"title": "Lorem Ipsum",
"richText": {
"firsInstance": true,
"theme": "default",
"html": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>"
},
"primaryCta": {
"url": "#",
"text": "Click here"
}
},
{
"mainImage": {
"src": "https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80"
},
"image": {
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1555744164-728dd59f9d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1374&q=80"
}
]
},
"title": "Lorem Ipsum",
"richText": {
"html": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>"
},
"primaryCta": {
"url": "#",
"text": "Click here"
}
},
{
"mainImage": {
"src": "https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80"
},
"image": {
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80",
"mobileImageUrl": "https://images.unsplash.com/photo-1508168143669-3033ab15b23b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1491&q=80"
}
]
},
"title": "Lorem Ipsum",
"richText": {
"html": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.</p>"
},
"primaryCta": {
"url": "#",
"text": "Click here"
}
}
]
}
export class ImageAndCardSlider {
constructor(component) {
this.component = component;
this.cardsContainer = this.component.querySelector('.js-cards');
this.cards = this.component.querySelectorAll('.js-card');
this.currentTimeout = null;
this.init();
}
init() {
this.activeCardIndex = 0;
this.numberOfSlides = this.cards.length;
this.component.querySelector('.js-arrow-left').addEventListener('click', (e) => { e.preventDefault(); this.showPrev(); }, false);
this.component.querySelector('.js-arrow-right').addEventListener('click', (e) => { e.preventDefault(); this.showNext(); }, false);
const cardContainer = this.component.querySelector('.js-cards');
const config = {
root: cardContainer,
rootMargin: '0px',
threshold: 0.5,
};
const onIntersection = (entries) => {
for (let i = 0; i < entries.length; i++) {
const entry = entries[i];
if (entry.isIntersecting) {
const cardIndex = parseInt(entry.target.dataset.cardIndex, 10);
if (cardIndex !== this.activeCardIndex) {
this.activeCardIndex = cardIndex;
this.updateUI();
}
}
}
};
const cards = this.component.querySelectorAll('.js-card');
const observer = new IntersectionObserver(onIntersection, config);
cards.forEach((card) => {
observer.observe(card);
});
}
showPrev() {
if (this.activeCardIndex === 0) {
this.showCard(this.numberOfSlides);
} else {
this.showCard(this.activeCardIndex - 1);
}
}
showNext() {
if (this.activeCardIndex === this.numberOfSlides) {
this.showCard(0);
} else {
this.showCard(this.activeCardIndex + 1);
}
}
showCard(index) {
if (!this.cards[index]) {
return;
}
if (index === this.activeCardIndex) {
// It's already showing
return;
}
this.activeCardIndex = index;
let scrollPosition = 0;
for (let i = 0; i < this.activeCardIndex; i++) {
scrollPosition += this.cards[i].offsetWidth;
}
this.cardsContainer.scrollLeft = scrollPosition;
this.updateUI();
}
updateUI() {
this.cards.forEach((card) => {
card.classList.remove('active');
});
if (!this.cards[this.activeCardIndex].classList.contains('active')) {
this.cards[this.activeCardIndex].classList.add('active');
}
this.displayMainImage();
}
displayMainImage() {
const currentCard = this.cards[this.activeCardIndex];
const mainInactiveImageDiv = this.component.querySelector('.js-main-image:not(.active)');
const mainActiveImageDiv = this.component.querySelector('.js-main-image.active');
const imageUrl = currentCard.dataset.mainImage;
if (mainActiveImageDiv.style.backgroundImage.includes(imageUrl)) {
// We have already loaded this image
return;
}
if (this.currentTimeout) {
clearTimeout(this.currentTimeout);
}
this.currentSlideId = currentCard.id;
this.currentTimeout = setTimeout(() => {
// Wait before loading the image
const image = document.createElement('img');
image.src = imageUrl;
image.onload = () => {
mainInactiveImageDiv.style.backgroundImage = `url('${imageUrl}')`;
mainActiveImageDiv.classList.toggle('active');
mainInactiveImageDiv.classList.toggle('active');
};
}, 300);
}
}
export default (component) => new ImageAndCardSlider(component);
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.image-and-card-slider {
&__image {
@extend %spacer-medium;
padding-bottom: 100%;
position: relative;
@include breakpoint(medium) {
padding-bottom: 56.5%;
}
& > div {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity linear .5s;
width: 100%;
&.active {
opacity: 1;
}
}
}
&__arrow {
color: $color-gallery-arrow;
cursor: pointer;
height: 100%;
line-height: 19px;
text-shadow: 0 0 5px $color-gallery-arrow-shadow;
width: 100%;
&::before {
bottom: 0;
font-size: 3rem;
margin-top: -7%;
position: absolute;
top: 57%;
}
span {
@extend %visually-hidden;
}
&--left {
&::before {
content: '\02039';
left: 10px;
}
}
&--right {
&::before {
content: '\0203A';
left: auto;
right: 10px;
}
}
}
&__cards {
@extend %spacer-medium;
display: flex;
overflow-x: auto;
padding-bottom: rem(20);
scroll-behavior: smooth;
scroll-snap-points-x: repeat(100%); // Legacy
scroll-snap-type: mandatory;
scroll-snap-type: x mandatory;
scrollbar-color: transparent transparent; // Hide the scrollbar in FF
scrollbar-width: thin;
// Hide the scrollbar in Safari, Chrome, Opera and (the new Chromium) Edge
&::-webkit-scrollbar {
display: none;
}
}
&-card {
background-color: $color-white;
display: flex;
flex-direction: column;
flex-shrink: 0;
margin-right: rem(10);
opacity: .5;
padding: rem(30);
position: relative;
scroll-snap-align: center;
width: 80%;
@include breakpoint(medium) {
flex-direction: row-reverse;
margin-right: rem(50);
}
&.active {
opacity: 1;
}
&:first-child {
margin-left: 10%;
}
&__image {
@extend %spacer-medium;
display: block;
@include breakpoint(medium) {
margin-bottom: 0;
width: 40%;
}
}
&__content {
@include breakpoint(medium) {
width: 60%;
}
}
&__title {
@extend %heading03;
@extend %spacer-medium;
}
&__body {
@extend %spacer-medium;
}
&__primary-cta {
@extend %primary-cta;
@extend %spacer-small;
}
&__cta-container {
text-align: center;
@include breakpoint(medium) {
text-align: left;
}
}
&__secondary-cta {
@extend %secondary-cta;
}
&__primary-cta + &__secondary-cta {
margin-left: rem(30);
}
}
}
No notes defined.