sinayanaik/image-carousel-with-splidejs

splide cdn

<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>

CDN link for styling

<link
rel="stylesheet"  
href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css"
/>

basic hierarchy

Then initialize and mount Splide after the DOM content is loaded.

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#image-slider' ).mount();
} );

to adopt image size adjust css

.splide__slide img {
	width : 100%;
	height: auto;
}

Auto Crop

using 'cover' option, images can be displayed in a same size

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#image-slider', {
		'cover'      : true,
		'heightRatio': 0.5,
	} ).mount();
} );

perPage option, a slide can have multiple slides in a view port.

setting breakpoints for smaller devices

	breakpoints: {
			600: {
				perPage: 1,
			}

full screen slider

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#fullscreen-slider', {
		width : '100vw',
		height: '100vh',
	} ).mount();
} );