jQuery slider / Posts /

Multiple jQuery sliders on one page

33
The following is how the demo 4 of the jQuery slider did. For details please refer to the source code of demo 4 in the download package.

HTML:
<div id="thumbnail-slider"> ...... </div> ... ... <div id="thumbs2"> ...... </div>
Javascript:
This is part of my thumbnail-slider.js code (NOTE: Although I add two sliders on the page, but I only need to link this script once. One copy is enough with the following modification):

var thumbnailSliderOptions = { sliderId: "thumbnail-slider", orientation: "horizontal", ...... }; var thumbs2Op = { sliderId: "thumbs2", orientation: "vertical", ...... }; var mcThumbnailSlider = new ThumbnailSlider(thumbnailSliderOptions); var mcThumbs2 = new ThumbnailSlider(thumbs2Op); ..... (other minified portion of the code remains untouched)....
CSS:
And then I included two copies of stylesheets in the page: thumbnail-slider.css, and thumbs2.css:
Below is thumbnail-slider.js:
#thumbnail-slider { ... } ... ...

For thumbs2.js, I change all selectors to be #mcts2:
#thumbs2 { ...... } ... ...
It's all there is to it.
John  11 years ago   viewed: 25807    

4 Answers

2
Doesn't really work for me...
Jochendude
  10 years ago
1

Salut, après plusieurs recherches, j'ai fini par trouver la solution pour faire fonctionner plusieurs slides sur une page. 

1 - suivre les intructions de John

2- Copier / coller puis renommer la fonction principale (function ThumbnailSlider(f){...} [ function ThumbnailSlider2(f){...}....)


NB: les appels sont bien entendu liés aux fonction (var thumbnailSlider = new ThumbnailSlider(mct1_Options);  | var thumbnailSlider2 = new ThumbnailSlider2(mct2_Options);)

PaphyDesign
  8 years ago
3
Would you zip your testing page and send it to us (menucool) ?
milo   10 years ago
1
Works fine if the pure java-script slider version is used. Doesn't works on jquery version. Thanks for the helpful post..:)
Zeus   10 years ago

   

Your name*
Password
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question:
▲