JSFiddle - React, Tailwind, and code Playground

by Mixail

HTML

<head>
<meta charset="utf-8">
	 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class='viewport'>
    <ul class='slidewrapper' data-current=0>
        <li class='slide'>
            Slide 1
        </li>
        <li class='slide second'>
            Slide 2
        </li>
        <li class='slide third'>
            Slide 3
        </li>
    </ul>
    <a href="javascript: void(0)" id="prev_slide" class="arrows">←</a>
    <a href="javascript: void(0)" id="next_slide" class="arrows">→</a>
</div>


<script type="text/javascript" src="test.js"></script>
</body>

CSS

.viewport{
    width: 300px;
    height: 100px;
    overflow: hidden;
    position: relative;
}
.slidewrapper{
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    margin: 0;
    padding: 0;    
}
.slide{
    width: 300px;
    height: 100px;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    background: #ff0000;
}
.second{
     background: #00ff00;   
}
.third{
     background: #0000ff;   
}
#prev_slide
{
position: absolute;
top: 40px;
left: 0;
height: 100%;
}
#next_slide
{
position: absolute;
top: 40px;
right: 0;
height: inherit;  
}

JavaScript

var slideWidth=300;
var sliderTimer;
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,10000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,10000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,10000);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,10000);
    });
});

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if (currentSlide >= $('.slidewrapper').children().size())
    {
        currentSlide=0;   
        moveToSlide(currentSlide, true);
    }
    else {
        moveToSlide(currentSlide);
    }
}
function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        currentSlide=$('.slidewrapper').children().size()-1;   
        moveToSlide(currentSlide, true);
    }
    else {
    	moveToSlide(currentSlide);
    }    
}

function moveToSlide(slideId, fast)  {
    var cssSettings = {left: -slideId*slideWidth}
    	$slideWrapper = $('.slidewrapper');
    
    if (fast) {
        $slideWrapper.css(cssSettings);
    } 
    else {
    	$slideWrapper.animate(cssSettings,1500);
    }
    
    $slideWrapper.data('current',slideId);
}