JSFiddle - React, Tailwind, and code Playground

HTML

<div id="recorder">
 <div class="finn-no-backgroundbox">

<div class="finn-no-header-box">
<div class="finn-no-header-box-left"><img src="http://i65.tinypic.com/v5el2x.png" class="finn-no-img-logo" alt="" /></div>

<div class="finn-no-header-box-right">  <div class="finn-no-header-productname"> 
Citroen DS3</div> 
</div>

<div class="finn-no-header-underline"></div>
</div>  

<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 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 class="IMGslideFINNNO"><img src="http://i67.tinypic.com/106hkci.jpg" class="finn-no-img-small-size" alt="" /></div>
        
        <div class="IMGslideFINNNO"><img...

CSS

#recorder {
	width: 30px;
    height: 20px;
    transform: scale(0.50);
  }
  .finn-no-img-logo {
    /* max-height: 87px; */
    /* max-width: 149px; */
    /* opacity: 1.5; */
}
/*Slider*/
#smallLEFTbox {
    position: relative;
    background: black;
    display: table-cell;
    width: 158px;
    height: 508px;
    float: left;
    margin: 5px 0 0 0;
    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: 6px 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;

}
/*HEADER*/
.finn-no-header-box {
    display: table-cell;
    width: 925px;
    height: 60px;
    float: left;
    margin: 0px;
    color: #6b7277;
    /* background: rgba(255, 255, 255, 0.76); */
    font-family: helvetica;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
.finn-no-header-box-right {
    display: table-cell;
    width: 469px;
    height: 51px;
    float: right;
    text-align: left;
    margin: 3px;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
.finn-no-header-box-left {
    display: table-cell;
    width: 239px;
    height: 51px;
    float: left;
    text-align: left;
    margin: 0px;
    color: #66757f;
    font-family: arial;
    font-size: 11px;
    font-weight: normal;
    line-height: 13px;
}
.finn-no-header-productname {
    display: table-cell;
    float: right;
    width: 440px;
    height: 51px;
    text-align: left;
    text-align: center;
    margin: 1px 3px 2px 10px;
    color: #ffffff;
    font-family: helvetica;
    font-size: 41px;
    font-weight: 100;
   ...

JavaScript

$( document ).ready(function() {
$('#recorder').css('-webkit-transform', 'scale(100%)');
});
$(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.1) + increment) + 'px'
    }, secs, 'linear', function () {
        smallLEFTbox.css('top', startPos);
    });
}