Ninja Slider / Posts /

How to include multiple responsive image sliders in the same page

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

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
0

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

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   8 months ago
-5

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   8 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:
▲