JSFiddle - React, Tailwind, and code Playground

by Terry Lin

HTML

<link rel="stylesheet" href="https://sliderm.com/dist/1.0.7/sliderm.css">
<script src="https://sliderm.com/dist/1.0.7/sliderm.js"></script>
<h1>Pure JavaScript Slider / Carousel</h1>
<div style="padding: 10px 30px">
  <div class="sliderm">
    <div class="sliderm__slider">
      <div class="sliderm__slides">
        <div class="sliderm__slide"><img src="https://i.imgur.com/XshqXl2.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/QzVbSvO.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/bXtuef2.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/IoQ2E8G.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/YzJ5A3k.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/I9vglis.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/rjAtp42.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/voVVYsf.jpg" /></div>
        <!--
        <div class="sliderm__slide"><img src="https://i.imgur.com/CChsPuW.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/MsYDfwY.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/Q85DWgk.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/zpjFhP7.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/0szjnew.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/HzXCCep.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/WizpGFp.jpg" /></div>
        <div class="sliderm__slide"><img src="https://i.imgur.com/EidwwAp.jpg" /></div>
        -->
      </div>
    </div>
  </div>
 </div> 
 A Sliderm <a href="https://slider.com">slider</a> demo, <a href="https://github.com/terrylinooo/sliderm.js">source code </a> by <a href="https://terryl.in/">Terry L.</a>

JavaScript

const sliderm = new Sliderm('.sliderm', {
  loop: true,
  columns: 4,
  grouping: false,
  breakpoint: true,
});

sliderm.on('slide.start', (s) => {
  console.log(`The position before sliding: ${s.getPosition()}`);
});

sliderm.on('slide.end', (s) => {
  console.log(`Current position: ${s.getPosition()}`);
});