Splide CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css">
HTML Code
<div class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 01</li>
<li class="splide__slide">Slide 02</li>
<li class="splide__slide">Slide 03</li>
</ul>
</div>
</div>
JS Code
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '.splide', {
type : 'loop',
arrows:false,
pagination:true,
focus:0,
perMove:1,
autoplay:true,
interval:'3000',
gap:'1rem',
padding: {
left : '4rem',
right: '4rem',
},
perPage: 3,
breakpoints: {
992: {
perPage: 2,
padding: {
left : '2rem',
right: '2rem',
},
},
640: {
perPage: 1,
padding: {
left : '1rem',
right: '1rem',
},
},
}
}).mount();
} );
For more customizations please read splide documenation
Need Professional Support for Your Website Problems?
Whether you're facing website issues or struggling with code implementation, our team is here to assist. Hire us to get your website back on track.
Hire Us