Javascript Image Slider / Posts /

Add multiple sliders to one page?

232
I'm trying to add two sliders, one with a horizontal sliding transition and the second with a fading transition, to one page. however, whenever I try to add the second slider's options to the js file, the other slider stops working. Can someone provide me with the exact formatting needed for two sliders in the .js file that i can copy/paste? Thanks.
Jourdan  12 years ago   viewed: 51337    

9 Answers

12

You can do it as follows:

HTML:
<div id="sliderFrame1"> <div id="slider1"> <img src="images/image-slider-1.jpg" alt="" /> <img src="images/image-slider-2.jpg" alt="" /> ... ... </div> </div> ... ... <div id="sliderFrame2"> <div id="slider2"> <img src="images/image-slider-3.jpg" alt="" /> <img src="images/image-slider-4.jpg" alt="" /> ... ... </div> </div>
Javascript:
This is part of my js-image-slider.js code (NOTE: Link this script only once. One copy only.):

var sliderOptions1= { sliderId: "slider1", effect: "13,17,13,13,5", ... ... }; var sliderOptions2= { sliderId: "slider2", effect: "13", ... ... }; var imageSlider1=new mcImgSlider(sliderOptions1); var imageSlider2=new mcImgSlider(sliderOptions2); ..... (other codes remain untouched)....
CSS:
And then I included two copies of stylesheets: js-image-slider1,css, and js-image-slider2.css:
For js-image-slider1.js, I change all selectors to be:
#sliderFrame1 {position:relative;width:500px;margin: 0;} #slider1 { ... } #slider1 img {...}

For js-image-slider2.js, I change all selectors to be:
#sliderFrame2 {position:relative;width:340px;margin: 0 auto;} #slider2 { ... } #slider2 img {...}
...

Milo
  12 years ago
-4

This works for two sliders, but not for more than two on one site. What am I missing? The Javascript is not running for slider3 and higher, so it's not a CSS issue.

Rumi   7 years ago
-2

Oh well, never mind, I've found the error!

Rumi   7 years ago
0

I think this solution needs some modifications, it doesn't seem to be working with all the effects!

Anyone getting it works with latest version ?

Thanks

rami.alloush   8 years ago
0

in java script other code remains same means which code?

sonali
  6 years ago
-2

every thing working fine, 

thank you so much bro... 

bobby   5 years ago
-6

I am trying to do the same thing and I am getting the slideshows to work fine.  However, the bullets now will not show up.  The bullets were fine until I added the second slider. Any thoughts?

Shanna   8 years ago
-3

The bullets are configured through CSS. You need to check out the stylesheet.

Milo   8 years ago
-3

but dose not working arrows in multiple slider in one page


Jaydeep   8 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:
▲