Javascript Image Slider / Posts /

Add multiple sliders to one page?

170
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  4 years ago   viewed: 25801    

5 Answers

7

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
  4 years ago
-3

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   11 months ago
2

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

Milo   11 months 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   10 months ago
-1

but dose not working arrows in multiple slider in one page


Jaydeep   5 months 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: