JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div class="slider">
  <ul>
      <li><img src="http://bukk.it/catslide.gif" /></li>
      <li><img src="http://bukk.it/catstep.gif" /></li>
      <li><img src="http://bukk.it/catgun.gif" /></li>
      <li><img src="http://bukk.it/catwar.gif" /></li>
  </ul>
</div>

<script>
var sliders = []
  $('.slider').each(function() {
    sliders.push(new Slider(this))
  })
</script>

CSS

.slider {
  width: 400px; height: 300px;
  overflow: hidden;
}
  .slider > ul {
    /* styled by JS to match the added width and height of all <li>’s */
    position: relative;
    -webkit-transition: 0.5s left;
    -moz-transition: 0.5s left;
    -ms-transition: 0.5s left;
    -o-transition: 0.5s left;
 
    list-style: none;
    margin: 0; padding: 0;
  }
    .slider > ul > li {
      float: left;
      width: 400px; height: 300px;
    }

JavaScript

// How to make a JS slider http://rafbm.github.io/howtomakeaslider/ 

var Slider = function() { this.initialize.apply(this, arguments) }
  Slider.prototype = {
 
    initialize: function(slider) {
      this.ul = slider.children[0]
      this.li = this.ul.children
 
      // make <ul> as large as all <li>’s
      this.ul.style.width = (this.li[0].clientWidth * this.li.length) + 'px'
 
      this.currentIndex = 0
    },
 
    goTo: function(index) {
      // filter invalid indices
      if (index < 0 || index > this.li.length - 1)
        return
 
      // move <ul> left
      this.ul.style.left = '-' + (100 * index) + '%'
 
      this.currentIndex = index
    },
 
    goToPrev: function() {
      this.goTo(this.currentIndex - 1)
    },
 
    goToNext: function() {
      this.goTo(this.currentIndex + 1)
    }
  }