Problems setting a loop of a loop for 5 times

Question

I am building a slider with jQuery. The reference of my goal is the slider on yahoo.com

My question, or issue, after the thumbnails pass 5, I need them to "slide", (as they do when clicking 'next') to show the next 5 thumbnails. How do I trigger the "next" function to keep the thumbnails in sync with the slideshow?

This is the loop:

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);

Here is all my code:

HTML

<!--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>
      </div>

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

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

    <!-- 5-10 -->
    <div>
       <div><img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" />
      <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div>
      </div>

      <div><img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" />
      <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div>
      </div>

      <div><img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" />
       <div id="tbdescp"> Preciosa Casa en Venta 1´450,000</div>
      </div>

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

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

    <!-- 10-15 -->
    <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>
      </div>

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

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

  </div>

</div>

<!-- "next page" action -->
<a class="next browse right"></a>
</div>


<div id="actionButtons">
    <input type="image" src="images/atras.png" onclick="api.prev();" >

   <input type="image" src="images/pause.png" class="pause" onclick="toggle(this);" >

   <input type="image" src="images/adelante.png" onclick="api.next();" >
</div>






<!--termina Slide Izquierda con Destaques-->

</div>
<!--Termina codigo del slide-->

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; }

/* up and down */
a.up, a.down  {
    background:url(../images/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-30px 0; }
a.up:active { background-position:-60px 0; }

/* down */
a.down { background-position: 0 -30px; }
a.down:hover { background-position:-30px -30px; }
a.down:active { background-position:-60px -30px; }


/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}


/* styling for the image wrapper  */
#image_wrap {
    /* dimensions */
    width:500px;
    padding:15px 0;
    margin-left:138px;
    margin-bottom:5px;
    height:380px;

    /* centered */
    text-align:center;

    /* some "skinning" 
    background-color:#efefef;*/
    border:1px solid #fff;
    outline:1px solid #ddd;
    -moz-ouline-radius:4px;
}

#image_wrap img {
    width:425px;
    height:350px;
    margin-top:17px;}

#sponsorbox {
    float:left;
    margin:0px;
    width:135px;
    height:410px;}  

#sponsorbox div {
    float:left;
    padding:10px; 
    border:1px solid #ccc;
    margin-bottom:0px;
        font-size:10px;}    

#sponsorbox div img {
    width:82px;
    height:62px;}   

#sponsorbox #tbdescpleft {
    width:82px;
    margin-bottom:13px;
    border:0px solid #ccc;} 


#navslid {
    float:left;
    width:425px;
    height:35px;
    background-color:#CCC;
    position:absolute;
    margin-left:37px;
    margin-top:17px;
    ;}

JS

$(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

},5000);

// 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;
}

Here is a Fiddle

http://jsfiddle.net/SmW3F/1/

Answer 1

Update setInterval to check for the modulus of 0. Once at the end, you need to return to the beginning, so I added a while loop to scroll back.

var count = 0;
var scroll_count = 0;
setInterval(function()
{
    count++;
    if($(".items img").eq(count).length != 0)
    {            
        $(".items img").eq(count).trigger("mouseover");

        if(count % 5 === 0)
        {                
            api.next();  
            scroll_count++;
        }            
    }
    else
    {
        count = 0; //reset counter
        // Ideally, instead of this while loop, there would  
        // be a single call to a function like api.first() or whatever.
        while(scroll_count--)
        {               
            api.prev(); // scroll to beginning
        }
    }
},2000);

See jsFiddle