Javascript Image Slider >
Posts >
Is it possible to 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.
one year ago
Jourdan,
---- Say you want to have two image sliders on the same page with id="slider1" and id="slider2" respectively.
---- Download the newest version of the Menucool Image Slider (version 2012.5.13), get the js-image-slider.js file from one of the themes folder, go to the top of the script, and change it as follows:
var sliderOptions1=
{
sliderId: "slider1",
effect: "9",
... ...
};
var sliderOptions2=
{
sliderId: "slider2",
effect: "13",
... ...
};
var imageSlider1=new mcImgSlider(sliderOptions1);
var imageSlider2=new mcImgSlider(sliderOptions2);
/* Menucool Javascript Image Slider v2012.5.13. Copyright www.menucool.com */
... (Remain unchanged)....
---- The CSS file needs update as well. You should include two stylesheet for the two sliders and change the #slider selector to #imageSlider1 and #imageSlider2 respectively.
7 months ago
Hi Milo,
I am having the same problem while adding multiple sliders on the single webpage.
I did all the changes in js-image-slider.js file and js-image-slider.css file as per your suggestions but sliders appear one above the other but timages are not getting loaded.
Could you please help?
Thanks.
one year ago
k..but we have more information.......
10 months ago
Hi there,
I have managed to get two slides appearing on the same page, but now the images wont load...
I have created a second div with the id "imageSlider2"
I have repeated the first block of code in the .js file and differentiated between slider1 and slider2.
I have also repeated the CSS, and changed the references to "imageSlider2" throughout. The sliders appear one above the other but the loading image is all I can see. Any suggestions?
10 months ago
I think you have somewhere not properly configured. Could you stage a testing page online so that I can take a look?
10 months ago
Unfortunately I only have access to an internal facing page, not a public one...