Ninja Slider / Posts /

How to include multiple responsive image sliders in the same page

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

6 Answers

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


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 ?

  one year ago

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

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

So I feel like I have a basic knowledge of HTML and CSS, and I'm learning JavaScript. I currently have two modal sliders from demo 8 on one site. I've changed my IDs in the css and html to differentiate between "ninja-slider" and "ninja-slider2." I've also made the changes you listed in the javascript. Do I need to change the bit of javascript that is in the html page as well? (The portion with document.getElementById("ninja-slider")). I've tried changing it and leaving it. My thumbnails are correct for both galleries, but clicking on the thumbnails to the second gallery brings up the images from the first gallery. Any suggestions?

Magnolia   2 days ago

I don't know what is the usage you are using the code document.getElementById("ninja-slider")). If you have that piece of code, you must be pointing to the correct slider id.

  6 hours 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: