JSFiddle - React, Tailwind, and code Playground

by davidpett

HTML

<script src="https://raw.github.com/iosscripts/iosSlider/master/_src/jquery.iosslider.min.js"></script>
<div class="iosSlider">
  <div class="slider">
    <div class="slides">
      <div class="slide">
        <a href="#"><img src="http://placehold.it/970x400/" alt="Slide 1"/></a>
      </div>
      <div class="slide">
        <a href="#"><img src="http://placehold.it/970x400/" alt="Slide 2"/></a>
      </div>
      <div class="slide">
        <a href="#"><img src="http://placehold.it/970x400/" alt="Slide 3"/></a>
      </div>
      <div class="slide">
        <a href="#"><img src="http://placehold.it/970x400/" alt="Slide 4"/></a>
      </div>
    </div>
  </div>
</div>

CSS

/* slider container */
.iosSlider {
  /* required */
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  
  width: 970px;
  height: 400px;
}

/* slider */
.iosSlider .slider {
  /* required */
  width: 100%;
  height: 100%;
}

/* slide */
.iosSlider .slider .slide {
  /* required */
  float: left;

  width: 970px;
  height: 400px;
}

JavaScript

$('.iosSlider').iosSlider({
  snapToChildren: true,
  autoSlide: true,
  infiniteSlider: true,
  desktopClickDrag: true
});