Cover slider test
by arooaroo
HTML
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css">
<html>
<head>
<script type="application/javascript">
document.addEventListener( 'DOMContentLoaded', function () {
new Splide( '#image-slider', {
type: 'loop',
focus: 'center',
fixedWidth: 180,
perPage: 1,
} ).mount();
} );
</script>
<style>
.grid-container {
max-width: 900px;
}
.splide {padding: 4rem}
</style>
</head>
<body>
<div class="grid-container">
<div id="image-slider" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/0000FF">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/00FF00">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/FF0000">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/FFFF00">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/FF00FF">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/00FFFF">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/0F0F0F">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/F0F0F0">
</li>
<li class="splide__slide">
<img src="https://via.placeholder.com/160x230/FFFFFF">
</li>
</ul>
</div>
</div>
</div>
</body>
</html>