JSFiddle - React, Tailwind, and code Playground

by sunil_kmr19

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="slider">
	<ul class="slides">
	    <li class="slide active"><img src="http://beaverslider.com/img/slider-main/1.jpg"></li>
	    <li class="slide"><img src="http://beaverslider.com/img/slider-main/2.jpg"></li>
	    <li class="slide"><img src="http://beaverslider.com/img/slider-main/3.jpg"></li>
	    <li class="slide"><img src="http://beaverslider.com/img/slider-main/4.jpg"></li>
	<!-- ... and so on -->
	</ul>
<div>
	<p class="left">  <a href="#"> <  </a> </p>
	<p class="right"> <a href="#"> > </a></p>
</div>

</div>

CSS

#slider
	{
		width: 960px;
		height: 317px;
		overflow: hidden;
		position: relative;
	}

	#slider .slides
	{
		display: block;
		margin:0;
		padding: 0;
	}

	#slider .slide
	{
		/*float: left;*/
		list-style-type: none;
		display: none;
	}

  #slider .active{
    	display:block;
    }

	.left{
		position: absolute; 
		left: 17px; 
		top: 32%; 
	}

	.right{
		position: absolute; 
		right: 22px; 
		top: 33%; 
	}

	.left a, .right a{
		text-decoration: none;
		color: rgb(73, 73, 73); 
		font-size: 48px; 
		background: rgb(204, 204, 204) none repeat scroll 0% 0%; 
		border: 1px solid rgb(119, 119, 119);		

	}

	.left a:hover, .right a:hover{
		background: #000; 
	}

JavaScript

'use strict';
$(function(){
	var pause = 2000;
	var $slider = $('#slider');
	var interval;
	startSlider();
	function startSlider(){
		interval = setInterval(funSlide, pause, true);
	}
	function stopSlider(){
		clearInterval(interval);
	}

	function funSlide(value){
		if(value)
		{
		var $current=$("#slider .slide:visible").fadeOut();
    	var $next = $current.next().length ? $current.next() : $("#slider .slide:first");
        $next.fadeIn(100);			
		}
		else
		{
		var $current=$("#slider .slide:visible").fadeOut();
    	var $prev = $current.prev().length ? $current.prev() : $("#slider .slide:last");
        $prev.fadeIn(100);	
		}
		
	}

	$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
	$('body').on('click', '.right a', function(){
		funSlide(true);
	})
	$('body').on('click', '.left a', function(){
		funSlide(false);
	})
});