Javascript Image Slider / Posts /

Add multiple sliders to one page?

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  5 years ago   viewed: 30128    

8 Answers


You can do it as follows:

<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>
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)....
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 {...}

  5 years ago

Thanks. I used this method on my page and it works well. :-)

Faniso   7 months ago

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   one month ago

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

Rumi   one month ago

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   one year ago

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

Milo   one year ago

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 ?


rami.alloush   one year ago

but dose not working arrows in multiple slider in one page

Jaydeep   one year ago


Your name*
(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: