slim-slider
Version:
minimal vanilla carousel
43 lines (40 loc) • 1.33 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slim Slider Example</title>
<link rel="stylesheet" href="./../styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
</head>
<body>
<script src="./../dist/build.js"></script>
<div class="slim-slider">
<div class="slim-slide" data-thumb="https://pa.namshicdn.com/product/68/8181/1-cart.jpg">
<img src="https://pa.namshicdn.com/product/68/8181/1-zoom.jpg">
</div>
<div class="slim-slide" data-thumb="https://pa.namshicdn.com/product/68/8181/2-cart.jpg">
<img src="https://pa.namshicdn.com/product/68/8181/2-zoom.jpg">
</div>
<div class="slim-slide" data-thumb="https://pa.namshicdn.com/product/68/8181/3-cart.jpg">
<img src="https://pa.namshicdn.com/product/68/8181/3-zoom.jpg">
</div>
<div class="slim-slide" data-thumb="https://pa.namshicdn.com/product/68/8181/4-cart.jpg">
<img src="https://pa.namshicdn.com/product/68/8181/4-zoom.jpg">
</div>
</div>
<script>
let Slider = new SlimSlider({
selector: '.slim-slider',
childsClassName :'.slim-slide',
threshold: 15,
dir: 'ltr',
showPointers : true,
showButtons: true,
showThumbnails: true,
infinite: true,
itemsPerSlide : 1
})
console.log(Slider)
</script>
</body>
</html>