JSFiddle - React, Tailwind, and code Playground

by Sandra Caroline Hansen

HTML

<div id="smallLEFTbox">
    <div id="finnnosliderleftside">
        <div class="IMGslideFINNNO"><img src="http://i67.tinypic.com/106hkci.jpg" class="finn-no-img-small-size" alt="" /></div>
        
        <div class="IMGslideFINNNO"><img src="http://i65.tinypic.com/29p2kww.jpg" class="finn-no-img-small-size" alt="" /></div>
        
        <div class="IMGslideFINNNO"><img src="http://i66.tinypic.com/2h7nrdk.jpg" class="finn-no-img-small-size" alt="" /></div>
        
        <div class="IMGslideFINNNO"><img src="http://i65.tinypic.com/zj8k1w.jpg" class="finn-no-img-small-size" alt="" /></div>
        
        <div class="IMGslideFINNNO"><img src="http://i68.tinypic.com/21j4snp.jpg" class="finn-no-img-small-size" alt="" /></div>
            
        
    </div>
</div>

CSS

#smallLEFTbox {
    position: relative;
    background: black;
    display: table-cell;
    width: 158px;
    height: 516px;
    float: left;
    margin: 0px;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
#finnnosliderleftside {
    position: absolute;

}

.IMGslideFINNNO {
      display: table-cell;
    width: 149px;
    height: 95px;
    float: left;
    /* border: 1px solid #3a9358; */
    margin: 4px 2px;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
  
}
.finn-no-img-small-size {
    /* max-height: 99px; */
    max-width: 149px;
    opacity: 1.5;

}

JavaScript

$(function () {
    var startTime = +new Date();
    $('#smallLEFTbox').css('overflow', 'hidden');
    
    var finnnosliderleftside = $('#finnnosliderleftside'),
        items = finnnosliderleftside.find('.IMGslideFINNNO');
    var finnnosliderleftsideHeight = finnnosliderleftside.height(),
        itemsNum = items.length,
        itemHeight = items.height();

    finnnosliderleftside.css('top', '-' + (finnnosliderleftsideHeight + itemHeight) + 'px');

    var startPos = finnnosliderleftside.css('top');

    items.first().before(items.clone());
    items.last().after(items.clone());

    scrollItems(finnnosliderleftside,finnnosliderleftsideHeight,itemHeight,startPos,3);
    var endTime = +new Date();
    var diff = endTime - startTime;
    console.log(diff);
    setInterval(function(){ 
        scrollItems(finnnosliderleftside,finnnosliderleftsideHeight,itemHeight,startPos,3);
    }, 3);
});

function scrollItems(smallLEFTbox, targetsHeight, increment, startPos, temps) {
    var secs = temps * 6000;
    smallLEFTbox.animate({
        'top': '-' + ((targetsHeight * 1, 5) + increment) + 'px'
    }, secs, 'linear', function () {
        smallLEFTbox.css('top', startPos);
    });
}