0

I have searched for this for quite sometime and tried putting two different plugins together to make this work but nothing seems to work.

Do you guys know of any good links to add a slider to the thumbnails in the nivo slider so you can only view 5 thumbnails at a time and when you click or left on the thumbnail area it slides to show the next 5 thumbnails?

I tried JSCarousel and ThumbnailScroller to the .nivo-controlNav tag but have had no luck with either one.

Any help would be appreciated it thanks!

Jiran Dowlati
  • 21
  • 4

1 Answers1

0

It seems as though you may need to engineer a custom solution. I'd suggest trying again with JSCarousel, I've used it in the past for this very same solution and was successful. Otherwise, I won't write your code for you, but the pseudo-code would go like such:

  1. List all the thumbnails, within a div tag which is the height (with margin and padding) of the thumbnails and a automatic width. Wrap a div around it with a fixed width. For instance if you have square thumbnails of 90px and you want to have 10px of padding around each, then your container div height is 110px and if you want to show 5 thumbnails then your width is 550px. The most important thing is that your overflow must be set to hidden so no other thumbnails will show.
  2. Create your buttons on either side.
  3. On the click of a button, shift the left position of your thumbnail holding div by 550px (or whatever width you have).
  4. Have conditional statements which checks if the left position is greater than the width (right-limit reached) or less than 0 (left-limit reached).

Hopefully this will point you in the right direction!

cereallarceny
  • 4,913
  • 4
  • 39
  • 74
  • Almost got it working, what do you mean by left position, margin-left or give the div an absolute position and affect left attr from there? – Jiran Dowlati Apr 08 '12 at 00:36
  • What I am stuck on is if animate with marginLeft it just makes those same pictures but go left 550px instead of show the next thumbnails and if I do select the img tag it moves them all a marginLeft 550px and nothing shows, how do I make it so that the img slides away and shows the next 5 thumbnails? This is greatly appreciated! Thanks – Jiran Dowlati Apr 08 '12 at 00:47
  • The outer div needs to be position relative and the one wrapping the images is position absolute. Sorry to not clarify. – cereallarceny Apr 08 '12 at 05:48