Correct way to make infinite loop in jquery divs and images

Question

I have a code to display 4 images like:

function fadeDivs()
{
    var currentPanel = $("ul li:visible");
    var currentPanelIndex = currentPanel.index();

    currentPanel.fadeOut(1000);

    // If the next panel to fade in is beyond the last, start from the beginning again.
    if(currentPanelIndex == ($("ul li").length - 1))
    {
        $("ul li:first-child").fadeIn(1000);
    }
    else    // If it's not the last li, keep going through the list
    {
        currentPanel.next().fadeIn(1000);
    }

    // Keep the ball rolling
    setTimeout(fadeDivs, 5000);
}

$(document).ready(function() {
    // Just to make it look nice - this can be deleted (it's just filler content)
    $("ul li:eq(0)").html("<img src='http://barbados.org/landscap/bcparadise1.jpg'>");
    $("ul li:eq(1)").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>");
    $("ul li:eq(2)").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>");
    $("ul li:eq(3)").html("<img src='http://www.croatia-danexumag.com/cms_upload/upload/Apartments_VERUDELA_BEACH_00.jpg'>");

    // Start the ball rolling
    setTimeout(fadeDivs, 3000);
});

Now I want to display them in a matrix style with

section.card-container{
    float: left;
     margin:0;
    width:24.94%;
}

.card-container {
    position: relative;
    width: 200px;
    height: 200px;

    -webkit-perspective: 1000;
       -moz-perspective: 1000;
         -o-perspective: 1000;
        -ms-perspective: 1000;
            perspective: 1000;
}

.card-container .card {
    width: 100%;
    height: 100%;
    position: absolute;

    -webkit-transition: -webkit-transform .7s;
     -moz-transition: -moz-transform .7s;
       -o-transition: -o-transform .7s;
      -ms-transition: -o-transform .7s;
          transition: transform .7s;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.card-container .card div { 
    height: 100%;
    width: 100%;
    position: absolute;
    background: #FBFBFB;
    border: 1px solid #BFBFBF;

    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
         -o-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
            backface-visibility: hidden;

    -webkit-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
       -moz-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
         -o-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
        -ms-box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
            box-shadow: 0 7px 9px -8px rgba(0,0,0,.5);
}

in the html:

<section class="card-container">
        <div id="so1" class="card over"  data-direction="right" >       
          <div class="front" >

              <ul>
     <li class='thecontent'> CONTENT 1</li>
     <li class='thecontent'> CONTENT 2</li>
     <li class='thecontent'> CONTENT 3</li>
     <li class='thecontent'> CONTENT 4</li>
              </ul>
          </div>         
          <div class="back" style="background-color:#99ca3c;">
              <img src="images/fancy_cereas1.jpg" width ="100%;" height ="100%;" alt=""/>               
          </div>         
        </div>
    </section>

Now I would like to apply this to all 8 cards cells I have in the matrix, but I cannot make it to work, It stops when reaches 5 in counter and also is not displaying images in other cells other than 1, How to solve the issue?

please take a look at my fiddle

Answer 1

Some images couldn't be found anymore so I reused some.

I changed the document.ready function to this:

$(document).ready(function() {
// Just to make it look nice
for(var i = 0; i < 32;){
    $("ul li:eq("+(i++)+")").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>");
    $("ul li:eq("+(i++)+")").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>");
    $("ul li:eq("+(i++)+")").html("<img src='http://www.traveltovietnam.cc/Upload/Tour/2352008111155_SplendorOfMuiNeBeachMuiNe2.jpg'>");
    $("ul li:eq("+(i++)+")").html("<img src='http://www.get-free-wallpapers.com/wallpaper/previews/3652-1202425455/nature/oceans/3652-victoria-beach-laguna-beach-california.jpg'>");
}  
// Start the ball rolling
setTimeout(fadeDivs, 3000);
});

You have 32 li tags but you only change the html of (the first) 4.

Is this the behavior you are looking for? Or do you want the images to flash 1 cell at a time? I apologize if I misunderstood your question.

EDIT:

I made a change to the fadeDivs() function and added a global variable "panelIndex" used to traverse through the li tags.

var panelIndex = 0;
function fadeDivs()
{
var previousIndex = panelIndex > 0 ? panelIndex - 1 : 0;
var previousPanel = $("ul li:eq("+previousIndex+")");
var uiLength = $("ul li").length;

previousPanel.fadeOut(100);
// If the next panel to fade in is beyond the last, start from the beginning again.
if(panelIndex == (uiLength - 1)){
    panelIndex = 0;
}
 $("ul li:eq("+panelIndex+")").fadeIn(100);
 panelIndex++;
// Keep the ball rolling
setTimeout(fadeDivs, 500);
}

This function shows all li content one by one and goes back to the first cell when it reaches the end. So it flashes 4 images at the first cell, 4 images at the second, etc.

Is this the behavior you are looking for, or can you build on this?