JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<div id='carousel_container'>  
  <div id='left_scroll'><a href='javascript:slide("left");'>&lt;&lt;</a></div>  
    <div id='carousel_inner'>  
        <ul id='carousel_ul'>  
            <li><a href='#'><img src='http://placekitten.com/g/150/100' /></a></li>  
            <li><a href='#'><img src='http://placekitten.com/150/100' /></a></li>  
            <li><a href='#'><img src='http://placekitten.com/g/150/100' /></a></li>  
            <li><a href='#'><img src='http://placekitten.com/150/100' /></a></li>  
            <li><a href='#'><img src='http://placekitten.com/g/150/100' /></a></li>  
  
        </ul>  
    </div>  
  <div id='right_scroll'><a href='javascript:slide("right");'>&gt;&gt;</a></div>  
  <input type='hidden' id='hidden_auto_slide_seconds' value='0' />  
</div>

CSS

#carousel_inner {
    float:left; /* important for inline positioning */
    width:300px; /* important (this width = width of list item(including margin) * items shown */
    overflow: hidden;  /* important (hide the items outside the div) */
    /* non-important styling bellow */
    background: #F0F0F0;
}

#carousel_ul {
    position:relative;
    left:100px;  important (this should be negative number of list items width(including margin) */
    list-style-type: none; /* removing the default styling for unordered list items */
    margin: 0px;
    padding: 0px;
    width:9999px; /* important */
    /* non-important styling bellow */
    padding-bottom:10px;
}

#carousel_ul li{
    float: left; /* important for inline positioning of the list items */
    width:150px;  /* fixed width, important */
    /* just styling bellow*/
    padding:0;
    background: #000;
    margin:10px 5px;
}

#carousel_ul li img {
    vertical-align: bottom;
    cursor:pointer;
    cursor: hand;
    border:0;
}
#left_scroll,
#right_scroll{
    float:left;
    height:130px;
    width:15px;
    background: #C0C0C0;
}
#left_scroll img,
#right_scroll img{
    border:0; /* remove the default border of linked image */
    /*styling*/
    cursor: pointer;
    cursor: hand;
}

JavaScript

$(document).ready(function() {
    //options( 1 - ON , 0 - OFF)
    var auto_slide = 1;
    var hover_pause = 1;
    var key_slide = 1;

    //speed of auto slide(
    var auto_slide_seconds = 5000;
    /* IMPORTANT: i know the variable is called ...seconds but it's in milliseconds ( multiplied with 1000) '*/

    /*move the last list item before the first item. The purpose of this is
        if the user clicks to slide left he will be able to see the last item.*/
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));

        //check if auto sliding is enabled
        if(auto_slide == 1){
            /*set the interval (loop) to call function slide with option 'right'
            and set the interval time to the variable we declared previously */
            var timer = setInterval('slide("right")', auto_slide_seconds);

            /*and change the value of our hidden field that hold info about
            the interval, setting it to the number of milliseconds we declared previously*/
            $('#hidden_auto_slide_seconds').val(auto_slide_seconds);
        }

        //check if hover pause is enabled
        if(hover_pause == 1){
            //when hovered over the list
            $('#carousel_ul').hover(function(){
                //stop the interval
                clearInterval(timer)
            },function(){
                //and when mouseout start it again
                timer = setInterval('slide("right")', auto_slide_seconds);
            });

        }

        //check if key sliding is enabled
        if(key_slide == 1){
            //binding keypress function
            $(document).bind('keypress', function(e) {
                //keyCode for left arrow is 37 and for right it's 39 '
                if(e.keyCode==37){
                        //initialize the slide to left function
                        slide('left');
                }else if(e.keyCode==39){
                        //initialize the slide to right function
      ...