<div class="animated-card-carousel" data-module="animatedCardCarousel" data-autoplay-timeout="7000" aria-labelledby="animatedCardCarousel">
<div class="container">
<h2 class="animated-card-carousel__header" id="animatedCardCarousel">Animated Card Carousel</h2>
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<article class="animated-carousel-card" data-module="cardCarousel" data-show-more-label="Show More" data-show-less-label="Show Less">
<div class="animated-carousel-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717">
<img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444" alt="Image Description" loading="lazy">
</picture>
</div>
<div class="animated-carousel-card__content">
<p class="animated-carousel-card__subheader">1976 - 1979</p>
<h3 class="animated-carousel-card__header">Milestone Title</h3>
<div class="animated-carousel-card__description rtf">
<p>Nulla fringilla eros massa, sed convallis ante blandit in. Vestibulum quis enim tempor, aliquam risus sit amet, fermentum lorem. Proin aliquam in neque vitae commodo. Cras a placerat nisi, a scelerisque enim. Nulla ultricies leo tortor, in feugiat velit venenatis id. Aliquam pretium dapibus nibh, non porttitor neque cursus nec.</p>
</div>
<div class="animated-carousel-card__action">
<button type="button" class="btn btn--primary btn--outline btn--small">
Show More
</button>
</div>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="animated-carousel-card" data-module="cardCarousel" data-show-more-label="Show More" data-show-less-label="Show Less">
<div class="animated-carousel-card__content">
<p class="animated-carousel-card__subheader">1977 - 1980</p>
<h3 class="animated-carousel-card__header">Milestone Title</h3>
<div class="animated-carousel-card__description rtf">
<p>In 1977 the Model 115 cell deglycerolization system, the Model 30-S apheresis system, and the Model 102 cell washer systems are launched.</p>
<p>1978 Saw the opening of the Braintree, MA facility at 400 Wood Road.</p>
</div>
<div class="animated-carousel-card__action">
<button type="button" class="btn btn--primary btn--outline btn--small">
Show More
</button>
</div>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="animated-carousel-card" data-module="cardCarousel" data-show-more-label="Show More" data-show-less-label="Show Less">
<div class="animated-carousel-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717">
<img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444" alt="Image Description" loading="lazy">
</picture>
</div>
<div class="animated-carousel-card__content">
<p class="animated-carousel-card__subheader">1978 - 1981</p>
<h3 class="animated-carousel-card__header">Milestone Title</h3>
<div class="animated-carousel-card__description rtf">
<p>Etiam egestas fringilla lacus, sit amet egestas sapien blandit eget. Quisque tincidunt ante massa, eu consectetur dolor placerat iaculis. Phasellus vestibulum urna ut quam efficitur, euismod accumsan augue maximus. Aenean quis est sed sem fringilla accumsan. Nullam fermentum ante purus, sed vestibulum leo pharetra vel. Fusce aliquam metus et porttitor ullamcorper.</p>
</div>
<div class="animated-carousel-card__action">
<button type="button" class="btn btn--primary btn--outline btn--small">
Show More
</button>
</div>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="animated-carousel-card" data-module="cardCarousel" data-show-more-label="Show More" data-show-less-label="Show Less">
<div class="animated-carousel-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717">
<img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444" alt="Image Description" loading="lazy">
</picture>
</div>
<div class="animated-carousel-card__content">
<p class="animated-carousel-card__subheader">1979 - 1982</p>
<h3 class="animated-carousel-card__header">Milestone Title</h3>
<div class="animated-carousel-card__description rtf">
<p>Aliquam mi sapien, dignissim ut urna et, imperdiet rutrum elit. Pellentesque sit amet justo sed diam faucibus iaculis id ut urna. Donec eleifend nibh felis, et eleifend enim venenatis fermentum. Vestibulum non turpis volutpat, laoreet nulla eleifend, venenatis sem.</p>
</div>
<div class="animated-carousel-card__action">
<button type="button" class="btn btn--primary btn--outline btn--small">
Show More
</button>
</div>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="animated-carousel-card" data-module="cardCarousel" data-show-more-label="Show More" data-show-less-label="Show Less">
<div class="animated-carousel-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717">
<img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444" alt="Image Description" loading="lazy">
</picture>
</div>
<div class="animated-carousel-card__content">
<p class="animated-carousel-card__subheader">1980 - 1983</p>
<h3 class="animated-carousel-card__header">Milestone Title</h3>
<div class="animated-carousel-card__description rtf">
<p>Nulla fringilla eros massa, sed convallis ante blandit in. Vestibulum quis enim tempor, aliquam risus sit amet, fermentum lorem. Proin aliquam in neque vitae commodo. Cras a placerat nisi, a scelerisque enim. Nulla ultricies leo tortor, in feugiat velit venenatis id. Aliquam pretium dapibus nibh, non porttitor neque cursus nec.</p>
</div>
<div class="animated-carousel-card__action">
<button type="button" class="btn btn--primary btn--outline btn--small">
Show More
</button>
</div>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="animated-carousel-card" data-module="cardCarousel" data-show-more-label="Show More" data-show-less-label="Show Less">
<div class="animated-carousel-card__content">
<p class="animated-carousel-card__subheader">1981 - 1984</p>
<h3 class="animated-carousel-card__header">Milestone Title</h3>
<div class="animated-carousel-card__description rtf">
<p>Aliquam mi sapien, dignissim ut urna et, imperdiet rutrum elit. Pellentesque sit amet justo sed diam faucibus iaculis id ut urna. Donec eleifend nibh felis, et eleifend enim venenatis fermentum. Vestibulum non turpis volutpat, laoreet nulla eleifend, venenatis sem.</p>
</div>
<div class="animated-carousel-card__action">
<button type="button" class="btn btn--primary btn--outline btn--small">
Show More
</button>
</div>
</div>
</article>
</div>
<div class="swiper-slide">
<article class="animated-carousel-card" data-module="cardCarousel" data-show-more-label="Show More" data-show-less-label="Show Less">
<div class="animated-carousel-card__image">
<picture>
<source media="(max-width: 767px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430">
<source media="(max-width: 1279px)" srcset="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717">
<img src="https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444" alt="Image Description" loading="lazy">
</picture>
</div>
<div class="animated-carousel-card__content">
<p class="animated-carousel-card__subheader">1976 - 1979</p>
<h3 class="animated-carousel-card__header">Milestone Title</h3>
<div class="animated-carousel-card__description rtf">
<p>Etiam egestas fringilla lacus, sit amet egestas sapien blandit eget. Quisque tincidunt ante massa, eu consectetur dolor placerat iaculis. Phasellus vestibulum urna ut quam efficitur, euismod accumsan augue maximus. Aenean quis est sed sem fringilla accumsan. Nullam fermentum ante purus, sed vestibulum leo pharetra vel. Fusce aliquam metus et porttitor ullamcorper.</p>
</div>
<div class="animated-carousel-card__action">
<button type="button" class="btn btn--primary btn--outline btn--small">
Show More
</button>
</div>
</div>
</article>
</div>
</div>
</div>
<div class="animated-card-carousel__actions">
<div class="animated-card-carousel__pagination"></div>
<button type="button" class="animated-card-carousel__present link link--primary">View present day</button>
</div>
</div>
</div>
<div class="animated-card-carousel" data-module="animatedCardCarousel" data-autoplay-timeout="{{autoplayTimeout}}" aria-labelledby="animatedCardCarousel">
<div class="container">
<h2 class="animated-card-carousel__header" id="animatedCardCarousel">{{header}}</h2>
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
{{#json slides}}
{{#each this}}
<div class="swiper-slide">
{{>@animated-carousel-card
showMoreLabel=../../showMoreLabel
showLessLabel=../../showLessLabel
}}
</div>
{{/each}}
{{/json}}
</div>
</div>
<div class="animated-card-carousel__actions">
<div class="animated-card-carousel__pagination"></div>
<button type="button" class="animated-card-carousel__present link link--primary">{{goToLastLabel}}</button>
</div>
</div>
</div>
{
"header": "Animated Card Carousel",
"goToLastLabel": "View present day",
"autoplayTimeout": 7000,
"showMoreLabel": "Show More",
"showLessLabel": "Show Less",
"slides": [
{
"subheader": "1976 - 1979",
"header": "Milestone Title",
"description": "<p>Nulla fringilla eros massa, sed convallis ante blandit in. Vestibulum quis enim tempor, aliquam risus sit amet, fermentum lorem. Proin aliquam in neque vitae commodo. Cras a placerat nisi, a scelerisque enim. Nulla ultricies leo tortor, in feugiat velit venenatis id. Aliquam pretium dapibus nibh, non porttitor neque cursus nec.</p>",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
"1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
},
"src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
"description": "Image Description"
}
},
{
"subheader": "1977 - 1980",
"header": "Milestone Title",
"description": "<p>In 1977 the Model 115 cell deglycerolization system, the Model 30-S apheresis system, and the Model 102 cell washer systems are launched.</p><p>1978 Saw the opening of the Braintree, MA facility at 400 Wood Road.</p>"
},
{
"subheader": "1978 - 1981",
"header": "Milestone Title",
"description": "<p>Etiam egestas fringilla lacus, sit amet egestas sapien blandit eget. Quisque tincidunt ante massa, eu consectetur dolor placerat iaculis. Phasellus vestibulum urna ut quam efficitur, euismod accumsan augue maximus. Aenean quis est sed sem fringilla accumsan. Nullam fermentum ante purus, sed vestibulum leo pharetra vel. Fusce aliquam metus et porttitor ullamcorper.</p>",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
"1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
},
"src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
"description": "Image Description"
}
},
{
"subheader": "1979 - 1982",
"header": "Milestone Title",
"description": "<p>Aliquam mi sapien, dignissim ut urna et, imperdiet rutrum elit. Pellentesque sit amet justo sed diam faucibus iaculis id ut urna. Donec eleifend nibh felis, et eleifend enim venenatis fermentum. Vestibulum non turpis volutpat, laoreet nulla eleifend, venenatis sem.</p>",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
"1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
},
"src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
"description": "Image Description"
}
},
{
"subheader": "1980 - 1983",
"header": "Milestone Title",
"description": "<p>Nulla fringilla eros massa, sed convallis ante blandit in. Vestibulum quis enim tempor, aliquam risus sit amet, fermentum lorem. Proin aliquam in neque vitae commodo. Cras a placerat nisi, a scelerisque enim. Nulla ultricies leo tortor, in feugiat velit venenatis id. Aliquam pretium dapibus nibh, non porttitor neque cursus nec.</p>",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
"1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
},
"src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
"description": "Image Description"
}
},
{
"subheader": "1981 - 1984",
"header": "Milestone Title",
"description": "<p>Aliquam mi sapien, dignissim ut urna et, imperdiet rutrum elit. Pellentesque sit amet justo sed diam faucibus iaculis id ut urna. Donec eleifend nibh felis, et eleifend enim venenatis fermentum. Vestibulum non turpis volutpat, laoreet nulla eleifend, venenatis sem.</p>"
},
{
"subheader": "1976 - 1979",
"header": "Milestone Title",
"description": "<p>Etiam egestas fringilla lacus, sit amet egestas sapien blandit eget. Quisque tincidunt ante massa, eu consectetur dolor placerat iaculis. Phasellus vestibulum urna ut quam efficitur, euismod accumsan augue maximus. Aenean quis est sed sem fringilla accumsan. Nullam fermentum ante purus, sed vestibulum leo pharetra vel. Fusce aliquam metus et porttitor ullamcorper.</p>",
"image": {
"srcset": {
"767": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=767&h=430",
"1279": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=1280&h=717"
},
"src": "https://verndale-image-tools.herokuapp.com/random/mountains?seed=1&w=790&h=444",
"description": "Image Description"
}
}
]
}
import { Component } from '@verndale/core'
import Swiper, { Autoplay, Pagination, Parallax } from 'swiper';
// configure Swiper to use modules
Swiper.use([Autoplay, Pagination, Parallax]);
/**
* `AnimatedCardCarousel`
*
*
* @example
* import { AnimatedCardCarousel } from '@verndale/front-end-components';
*
* class Foo {
* construction(){
*
* const AnimatedCardCarousel = new AnimatedCardCarousel('.animated-carousel-card');
* }
* }
*/
class AnimatedCardCarousel extends Component {
setupDefaults() {
this.autoplay = this.el.dataset.autoplayTimeout || 10000;
this.dom = {
slider: this.el.querySelector('.swiper-container'),
slides: this.el.querySelectorAll('.swiper-slide'),
actionsContainer: this.el.querySelector('.animated-card-carousel__actions'),
pagination: this.el.querySelector('.animated-card-carousel__pagination'),
present: this.el.querySelector('.animated-card-carousel__present')
};
if (this.dom.slides.length) {
this.initSlider();
} else {
this.dom.actionsContainer.style.display = 'none';
}
}
addListeners() {
this.dom.present.addEventListener('click', this.onPresentClick.bind(this));
}
initSlider() {
this.swiper = new Swiper(this.dom.slider, {
speed: 1000,
parallax: true,
spaceBetween: 60,
threshold: 8,
autoplay: {
delay: this.autoplay,
disableOnInteraction: false,
stopOnLastSlide: true,
pauseOnMouseEnter: true
},
pagination: {
el: this.dom.pagination,
clickable: true,
renderBullet: (index, className) =>
`<div class="${className}" aria-label="Slide ${index}">
<div class="${className}__inner"></div>
</div>`
},
on: {
afterInit: swiper => {
this.animateBullet(swiper);
this.disableLinks(swiper);
},
slideChangeTransitionStart: swiper => {
if (!swiper.autoplay.running) {
swiper.autoplay.start();
}
this.animateBullet(swiper);
this.disableLinks(swiper);
}
}
});
}
disableLinks(swiper) {
swiper.slides.forEach(slide => {
if (slide.classList.contains('swiper-slide-active')) {
slide
.querySelectorAll('a')
.forEach(link => link.removeAttribute('tabindex'));
} else {
slide
.querySelectorAll('a')
.forEach(link => link.setAttribute('tabindex', -1));
}
});
}
animateBullet(swiper) {
let progress = 0;
const index = swiper.realIndex + 1;
const autoplayTime = this.autoplay / 100;
const bulletInner = this.dom.pagination.querySelector(
`.swiper-pagination-bullet:nth-child(${index}) .swiper-pagination-bullet__inner`
);
// Reset all bullets
this.dom.pagination
.querySelectorAll('.swiper-pagination-bullet__inner')
.forEach(bullet => (bullet.style.width = 0));
// Reset intervals if exist
if (this.interval) {
clearInterval(this.interval);
}
if (bulletInner) {
this.interval = setInterval(() => {
if (swiper.autoplay.paused || !swiper.autoplay.running) {
progress = 0;
bulletInner.style.width = progress;
}
if (progress >= 100) {
bulletInner.style.width = 0;
clearInterval(this.interval);
return;
}
bulletInner.style.width = `${progress++}%`;
}, autoplayTime);
}
}
onPresentClick() {
this.swiper.slideTo(this.dom.slides.length - 1);
}
}
export default AnimatedCardCarousel
@import
"../theme",
"variables";
.animated-card-carousel {
margin-bottom: map-get($module-spacing, "mobile");
margin-top: map-get($module-spacing, "mobile");
overflow: hidden;
@include mq(desktop) {
margin-bottom: map-get($module-spacing, "desktop");
margin-top: map-get($module-spacing, "desktop");
}
.swiper-container {
overflow: visible;
}
.swiper-slide {
height: auto;
.animated-card-carousel-card {
height: 100%;
}
}
}
.animated-card-carousel__header {
margin-bottom: 30px;
@include mq(desktop) {
margin-bottom: 60px;
}
}
.animated-card-carousel__actions {
@include mq(desktop) {
align-items: center;
flex-direction: row;
justify-content: flex-start;
margin-top: 42px;
}
align-items: center;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 36px;
pointer-events: all;
}
.animated-card-carousel__pagination {
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
margin: 0 0 30px;
@include mq(desktop) {
margin: 0 30px 0 0;
}
.swiper-pagination-bullet {
background-color: $swiper-pagination-bullet;
border-radius: 2.5px;
cursor: pointer;
font-size: 0;
height: 5px;
opacity: 1;
overflow: hidden;
position: relative;
transition: width 200ms ease-in-out;
width: 20px;
& + .swiper-pagination-bullet {
margin-left: 10px;
}
&.swiper-pagination-bullet-active {
width: 40px;
.swiper-pagination-bullet__inner {
display: block;
}
}
&:last-child {
.swiper-pagination-bullet__inner {
width: 100% !important;
}
}
}
.swiper-pagination-bullet__inner {
background-color: $primary-color;
border-radius: 2.5px;
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: 1;
}
}
$swiper-pagination-bullet: map-get(
$theme-colors,
'primary-light-gray'
) !default;
$primary-color: map-get($theme-colors, 'primary') !default;
$swiper-pagination-bullet-active: map-get(
$theme-colors,
'primary-gray'
) !default;
A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides. Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and “rotates” the next or previous slide into view. In some implementations, rotation automatically starts when the page loads, and it may also automatically stop once all the slides have been displayed. While a slide may contain any type of content, image carousels where each slide contains nothing more than a single image are common.
Ensuring all users can easily control and are not adversely effected by slide rotation is an essential aspect of making carousels accessible. For instance, the screen reader experience can be confusing and disorienting if slides that are not visible on screen are incorrectly hidden, e.g., displayed off-screen. Similarly, if slides rotate automatically and a screen reader user is not aware of the rotation, the user may read an element on slide one, execute the screen reader command for next element, and, instead of hearing the next element on slide one, hear an element from slide 2 without any knowledge that the element just announced is from an entirely new context.
Add the front-end-component library to your project
yarn add @verndale/front-end-componentsImport the style to your main style file in your project
@import '../../node_modules/@verndale/front-end-components/lib/animated-card-carousel/styles';Copy and paste to your project any of the markup in the alert variations - you can find the markup in the HTML tab.
The component will already have a default style/theme set, so it will work out of the box. The alert has a set of variables that may be overriden, or you may choose to just override the actual styles in your project. It is recommended to use the overrides if you can as it will be less code in your project.
Below is the list of variables you can override. You may also find these in the Assets tab under _variables.scss
$swiper-pagination-bullet
$swiper-pagination-bullet-active
$primary-colorYou always need to set your overrides before the import of you component - for example:
$swiper-pagination-bullet: #fffaaa;
$swiper-pagination-bullet-active: #fffaaa;
$primary-color: #06847b;
@import '../../node_modules/@verndale/front-end-components/lib/animated-card-carousel/styles';