Ninja Slider / Posts /

How to include multiple responsive image sliders in the same page

9
How can I include multiple Ninja Image Sliders in the same page?
Edvwardville  3 years ago   viewed: 8181    

4 Answers

0
You should have different ninja slider IDs for each slider. Say you have given them the id ninja-slider and ninja-slider2. Then open the ninja-slider.js with Notepad, and edit it as below:

var nsOptions = {sliderId: "ninja-slider", ...};
var nsOptions2 = {sliderId: "ninja-slider2",...};
var nslider = new NinjaSlider(nsOptions);
var nslider2 = new NinjaSlider(nsOptions2);

// (the following should be remain untouched)
/* Ninja Slider ....

In this approach you have two Ninja Sliders in the same page.

Notice you also need to style them differently with the css selector #ninja-slider and #ninja-slider2.
Milo   3 years ago
1

Hello,


What does it mean "Notice you also need to style them differently with the css selector #ninja-slider and #ninja-slider2." ? How do I do that ?

Ludovic
  one year ago
1

I can't seem to follow the above instructions and make this work. Can I have an example of what the .js file should look like as I've tried a combination of the above and none of them work. Also, what would I need to change in the html page as well? When I click on my images regardless of whether it's the first group of images or the second group, they all cycle through as if the images existed in one group?

Jo   10 months ago
-8

We don't have examples to show how to include two ninja sliders in the same page. But we have one (the demo 1 in the download package of www.menucool.com/jquery-slider) to show how to include two thumbnail sliders in one page. 

If you can hardly understand it, you need to hire a web developer to do it. A basic HTML, JavaScript and CSS knowledge is surely required.

Milo   10 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:
▲