JSFiddle - React, Tailwind, and code Playground

by Shishir Morshed

HTML

<div id="container">

        <div id="sliderContainer">
            <div id="slider">
                <div class="slider-arrow sa-left"><img src='http://s20.postimg.org/ank99eueh/arrow_left.png'/></div>
                <div class="slider-arrow sa-right"><img src='http://s20.postimg.org/8x187xcvd/arrow_right.png'/></div>
                <ul>
                  <li id='toggle1'><img src="http://s20.postimg.org/4pjrl0ynh/nature_green.jpg"></li>
                  <li id='toggle2'><img src="http://s20.postimg.org/4biflfejx/Nature_Park.jpg"></li>
                  <li id='toggle3'><img src="http://s20.postimg.org/mrziqe7al/tree.jpg"></li>
                </ul> 
            </div>
        </div>
    </div>

CSS

* {
		margin: 0;
		padding: 0;
	}

	#slider ul li {
		width: 800px;
		height: 400px;
	}

	.slider-arrow {
		position: absolute;
		z-index: 1;
		top: 50%;
		margin-top: -48px;
		cursor: pointer;
		display: none;
	}
	.sa-right {
		right: 0;
	}
  

	#slider ul li {
		float: left;

	}

JavaScript

$(function ($) {

		var slider = $('#slider ul');
	    var slideCount = $('#slider ul li').length;
	    var slideWidth = $('#slider ul li').width();
	    var slideHeight = $('#slider ul li').height();
	    var sliderUlWidth = slideCount * slideWidth;
	    var transitionDuration = 800;
	    var sliderDuration = 4000;
	    var activeSlide = 1;
	    var autoSlide;
	    var setAuto = true;



	    $('#slider').css({ width: slideWidth, height: slideHeight, overflow: 'hidden',position:'relative' });

	     $('#slider ul').css({ width: sliderUlWidth, position: 'absolute'});

	     function sliderAnimate() {
	     	clearInterval(autoSlide);

	     	slider.animate({
	     		left: -(activeSlide-1)*slideWidth
	     	},transitionDuration);

	     	if(setAuto){
	     		autoSlideHandler();
	     	}
	     	

	     	if(activeSlide == slideCount){
	     		setAuto = false;
	     	}
	     	
	     };

	     sliderAnimate();

		function autoSlideHandler(){

			autoSlide = setInterval(function(){
	     	
		     	if(activeSlide<slideCount){
		     		activeSlide++;
		     		sliderAnimate();
		     	}else {
		     		activeSlide = 1;
		     		sliderAnimate();
		     	}

		     },sliderDuration);
		}

	    $('.sa-left').click(function () {
	        if(activeSlide >1){
	        	activeSlide--;
	        	sliderAnimate();
	        }else {
          	activeSlide = slideCount;
            sliderAnimate();
          }
	    });

	    $('.sa-right').click(function () {
	        if(activeSlide < slideCount){
	        	activeSlide++;
	        	sliderAnimate();
	        }else {
          	activeSlide = 1;
            sliderAnimate();
          }
	    });

	    $( '.sa-left , .sa-right' ).delay(1000).fadeIn('slow');

	});