Meek Meek - 10 days ago 8
jQuery Question

Displaying 3 images at a time

I would like to display 3 images at a time from a box containing 10-12 images. I already have this script which displays one image at a time, but how can it be changed to rotate 3 (or another amount) at a time infinitely?
I have been trying to use

slice()
instead of
eq()
but I can't make it go forward by 3...

Js:

function displayImg() {
// Each item
var item = $('.image');

//initial fade-in time
var initialFadeIn = 1000;

//interval between items
var itemInterval = 3000;

//cross-fade time
var fadeTime = 1000;

//count number of items
var numberOfItems = item.length;

//set current item
var currentItem = 0;

//show first item
item.eq(currentItem).fadeIn(initialFadeIn);

//loop through the items
var infiniteLoop = setInterval(function() {
item.eq(currentItem).fadeOut(fadeTime);

if (currentItem == numberOfItems - 1) {
currentItem = 0;
} else {
currentItem++;
}
item.eq(currentItem).fadeIn(fadeTime);

}, itemInterval);
}

displayImg();


Markup:

<div id="parent">
<div class="image">one</div>
<div class="image">two</div>
<div class="image">three</div>
<div class="image">four</div>
<div class="image">five</div>
<div class="image">six</div>
<div class="image">Seven</div>
<div class="image">Eight</div>
<div class="image">Nine</div>
<div class="image">Ten</div>
</div>


JsFiddle here.

Answer

You can do this by using splice function.

No changes to your html

Js (I have done it with show/hide):

   function displayImg() {
  // Each item
  var item = $('.image');

  //initial fade-in time (in milliseconds)
  var initialFadeIn = 1000;

  //interval between items (in milliseconds)
  var itemInterval = 3000;

  //cross-fade time (in milliseconds)
  var fadeTime = 1000;

  //count number of items
  var numberOfItems = item.length;

  //set current item
  var currentItem = 0;
  var noOfItems=3;
  var totalItems=10;

  item.slice(currentItem, noOfItems).show()

   var infiniteLoop = setInterval(function() {
    item.slice(currentItem, noOfItems).hide()
    if(currentItem<=totalItems)
    {
        currentItem=noOfItems;
      noOfItems+=3;
    }
    else
    {
        currentItem=0;
      noOfItems=3
    }  
    item.slice(currentItem, noOfItems).show();
  }, itemInterval);
}

displayImg();

CSS:

    .image {
  display: none;
  position: relative;
  top: 0;
  left: 0;
}

I hope this helps