Hello, i'm trying multiple sliders on the same page, and it
works by the following approach.
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 {...}
...