JSFiddle - React, Tailwind, and code Playground

HTML

<script src="&quot;http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!--Comienza codigo del slide-->

<div id="bigboxset">

<!--Paid Sponsorship-->

<div id="sponsorbox">

<div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
            </div>
            
            <div id="tbdescpleft"> Preciosa Casa en Venta 1´450,000</div>
            
            
<div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
      </div>
      <div id="tbdescpleft"> Preciosa Casa en Venta 1´450,000</div>
      
<div><img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" />
      </div>
      <div id="tbdescpleft"> Preciosa Casa en Venta 1´450,000</div>

</div>


<!--End Paid Sponsorship-->


<!-- wrapper para imagen grande -->
<div id="image_wrap">

<!--NAvegador en el image_wrap-->

<div id="navslid"> </div>

<!--Termina NAvegador en el image_wrap-->

  <!-- Initially the image is a simple 1x1 pixel transparent GIF -->
  <img src="images/blank.gif" width="500" height="375" />
</div>

<!-- Termina wrapper para imagen grande -->


<!--Slide Izquierda con Destaques-->

<div class="wrapmins">
<!-- "previous page" action -->
<a class="prev browse left"></a>
 
<!-- root element for scrollable -->
<div class="scrollable" id="scrallable">
 
  <!-- root element for the items -->
  <div class="items">
 
    <!-- 1-5 -->
    <div>
      <div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf.jpg" />
      <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div>
      </div>
      
      <div><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730.jpg" />
      <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div>
      </div>
      
      <div><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49.jpg" />
       <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div>
     ...

CSS

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  
  
  
  */
  
  
  .wrapmins { width: 760px; height:120px;}
  
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 680px;
    height:150px;
	left:0;

    /* custom decorations 
    border:1px solid #ccc;
    background:url(../images/h300.png) repeat-x;*/
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:740px;
}

.items div div{
    float:left;
    width:134px;
}

.items div div div{
    float:left;
    width:82px;
	font-size:10px;
	margin-left:15px;
}

/* single scrollable item */
.scrollable img {
float: left;
margin: 5px 30px 5px 0px;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
width: 82px;
height: 62px;
}

/* active item */
.scrollable .active {
    border:1px solid #ddd;
    position:relative;
    cursor:default;
    border-bottom:3px solid skyblue;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(../images/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    
    cursor:pointer;
    font-size:1px;
	position:absolute;
}

/* right */
a.right { margin-top:40px; margin-left: 640px; background-position: 0 -30px; clear:right; }
a.right:hover { background-position:-30px -30px; }
a.right:active { background-position:-60px -30px; }


/* left */
a.left { margin-top:40px; margin-left: -30px;  }
a.left:hover  { background-position:-30px 0; }
a.left:active { background-position:-60px 0;...

JavaScript

$(function() {
var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });

$(".items img").on("hover",function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").trigger("mouseover");
   
var count = 0;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){
        console.log($(".items img").eq(count));
        $(".items img").eq(count).trigger("mouseover");
    } else count = 0; //reset counter
    
},2000);
    
// provide scrollable API for the action buttons
window.api = root.data("scrollable");

});


function toggle(el){
    if(el.className!="play")
    {
        el.className="play";
         el.src='images/play.png';
        api.pause();
    }
    else if(el.className=="play")
    {
        el.className="pause";
         el.src='images/pause.png';
        api.play();
    }

    return false;
}