search

nathansearles / slidesjs

SlidesJS is obsolete and no longer maintained.
https://nathansearles.github.io/slidesjs/
1.72k stars 357 forks source link

Multiple Slideshows on Single Page #324

Open christopherpaulhilton opened 12 years ago

christopherpaulhilton commented 12 years ago

Idea:

  1. Change the CSS of the '#slides' container to a class '.slides' and add the class '.slides' to each #slides Div
  2. Name the ID of each Slides instance 'Slides-NAME'

3.Use the jQuery attributeContainsPrefix selector to automatically select all Slides instances no matter how few or how many there are.

$('div[id|="slides"]').slides({ next: 'next', prev: 'prev' });

It has worked for me quite well, but I'm sure there is a cleaner way to use the CSS classes across multiple containers.

Cheers! Chris

ghost commented 11 years ago

The slides.js script searches the entire page for elements with given class names for the next/prev buttons, pagination, etc... you can update the script and replace all such instances with a jQuery find instead. For example when slides.js tries to find the "next" button:

It does: $('.' + option.next) It should be doing: $(this).find('.' + option.next)

If you get the un-minified version of the script this should only take you 5-10 minutes.