Carousel displays a rotating set of items, such as images or content slides, within a single space.
The carousel component leverages the Swiper JS package. For more details about Swiper JS visit https://swiperjs.com/get-started#installation
<div class="c-carousel">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</div>
* If using the Swiper npm set up, import the default Swiper styles
import 'swiper/css';* If using the Swiper cdn set up, import the default Swiper styles
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
.c-carousel .swiper {
height: 300px;
background-color: lightblue;
}
.c-carousel .swiper-slide {
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: bold;
color: #1A202C;
}
.c-carousel {
.swiper {
height: 300px;
background-color: lightblue;
}
.swiper-slide {
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
font-weight: bold;
color: #1A202C;
}
}
// CDN integration example
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js""></script>
<script type="module">
import Swiper from 'https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.mjs'
const swiper = new Swiper('.swiper', {
// Optional parameters
direction: 'horizontal',
loop: true,
// Pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
</script>