JSFiddle - React, Tailwind, and code Playground

by Kevin Faulhaber

HTML

<div id="scrolldiv_container">
<a href="javascript:void(0)" class="leftarrow scroll_knop" value="left"><<</a>
<div id="browser">
  <div class="inner_wrapper">
      <div class="img_container" style="background-color:#0CC"></div>
      <div class="img_container" style="background-color:#0FC"></div>
      <div class="img_container" style="background-color:#3CF"></div>
      <div class="img_container" style="background-color:#0CC"></div>
      <div class="img_container" style="background-color:#0FC"></div>
      <div class="img_container" style="background-color:#0CC"></div>
      <div class="img_container" style="background-color:#3CF"></div>
  </div>
</div>
<a href="javascript:void(0)" class="rightarrow scroll_knop" value="right">>></a>
</div>

CSS

#scrolldiv_container {
width:980px;
margin:auto;
}

#browser { 
float:left;
width: 900px; 
overflow: hidden;
white-space: nowrap
}

.inner_wrapper {
/*Dit is de breedte van de .img_container vermenigvuldigd met het aantal slides*/
width:6300px;
}

.scroll_knop {
float:left;
margin-top: 223px;
height:40px;
line-height:40px;
background-color: #ccc;
width:20px;
padding:10px;
font-weight: bold;
text-decoration:none;
opacity: 0.2;
}

.scroll_knop:hover {
opacity:1;
}



.img_container { 
width:900px; 
height:506px; 
float: left;
}

JavaScript

var jq = $.noConflict();

var siId = -1,
    si = function () {
        //hidding buttons
        siId = setInterval(function () {
            var leftPos = jq('#browser').scrollLeft();
            if (leftPos == 5400) {
                jq('#browser').animate({
                    scrollLeft: 0
                }, 800);
            } else {
                jq('#browser').animate({
                    scrollLeft: leftPos + 900
                }, 800);
            }
        }, 3000);
    }

//hidding arrows initially
jq('.rightarrow, .leftarrow').hide();

jq('#scrolldiv_container').mouseenter(function(){
    jq('.rightarrow, .leftarrow').show('fast');
    clearInterval(siId);
})
jq('#scrolldiv_container').mouseleave(function(){
    jq('.rightarrow, .leftarrow').hide('fast');
        si();
});

jq('.rightarrow').click(function () {
    var leftPos = jq('#browser').scrollLeft();
    if (leftPos == 5400) {
        jq('#browser').animate({
            scrollLeft: 0
        }, 800);
    } else {
        jq('#browser').animate({
            scrollLeft: leftPos + 900
        }, 800);
    }
});

jq('.leftarrow').click(function () {
    var leftPos = jq('#browser').scrollLeft();
    if (leftPos == 0) {
        jq('#browser').animate({
            scrollLeft: 5400
        }, 800);
    } else {
        jq('#browser').animate({
            scrollLeft: leftPos - 900
        }, 800);
    }
});

//starting slider here
si();