JadedEric
JadedEric

Reputation: 2103

Image scroller with jQuery

I'm looking for an example of code to scroll images in a layer based on certain criteria but I'm at a loss of what to Google insert blush face

The idea is to wrap images, more than 6 in a 3 column layout then add a "next" scroller to view the remaining images in a similar layout.

To do the 3 column + 2 row thing in CSS is easy, but the jQuery is eluding me at this point. Any ideas of what I can search for?

Upvotes: 0

Views: 217

Answers (2)

JadedEric
JadedEric

Reputation: 2103

It's actually really simple.

The idea is to iterate the collection of items, in my case I'll be using unordered lists to house the images.

Calculate the number of <li /> elements, denoting an image and hide the number you don't need.

$(".selector").find("li").each(function(idx) { 

   if (idx > (items - 1)) {
      $(this).css({ display: "none" })
   }

}

And then reverse the lookup to browse to the previous. Slap some nifty sliding animation onto this and your done. Thought it was more complex than this.

Upvotes: 0

jcreamer898
jcreamer898

Reputation: 8179

Try jquery image carousel...

One good one is http://sorgalla.com/jcarousel/

Upvotes: 1

Related Questions