JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div id="slider">
  <ul class="slides">
    <li class="slide">111</li>
    <li class="slide">222</li>
    <li class="slide">333</li>
    <li class="slide">444</li>
    <li class="slide">555</li>
    <li class="slide">666</li>
  </ul>
</div>

CSS

#slider {
  width: 720px;
  height: 400px;
  overflow: hidden;
  float: left;
  border: 1px solid black;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 400px;
  margin: 0;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 720px;
  height: 400px;
}

JavaScript

$(document).ready(function() {
  var width = 720;
  var animationSpeed = 700;
  var currentSlide = 1;
  var prevSlide;
  var $slider = $('#slider');
  var $slideContainer = $slider.find('.slides');
  var $slides = $slideContainer.find('.slide');

  $slider.click(function() {
  	prevSlide = currentSlide;
    if (prevSlide === $slides.length) {
    	currentSlide = 1;
    	$slideContainer.stop(true, true).animate({'margin-left': 0}, animationSpeed);
    } else {
    	currentSlide += 1;
    	$slideContainer.stop(true, true).animate({'margin-left': '-=720px'}, animationSpeed);
    }
  });
});