How to include multiple responsive image sliders in the same page

How can I include multiple Ninja Image Sliders in the same page?

Edvwardville 4 years ago viewed: 9811

12 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 4 years ago

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

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

-9

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 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 6 months 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.

Milo 5 months ago

Just evaluating this before buying a license. Only show stopper so far is being able to have multiple sliders on same page for demo 8 example.

Have made changes as above, duplicating nsOptions and nslider in ninja-slider.js, and my css to 2, 3, <n>, etc. But clearly it requires more changes than that.

I added an extra param to lightbox(idx) to pass in the relevent value to append for document.getElementById("ninja-slider<n>"), but it does not function.

Are you sure it works for multiple sliders on one page? As I cant get it to work, and I'm a professional web developer who understands js and css fairly well.

mark 4 months ago

Surely multiple sliders should work in one page. The problem for your case might be the lightbox. Sliders in lightbox are not {display:none;} when page is loading so the sliders might not be properly initiated. You can fix this by properly setting the initSliderByCallingInitFunc option in the ninja-slider.js. Please read and follow the instructions in http://www.menucool.com/responsive-slider.

Milo 4 months ago

yes, I've read the instructions (a number of times). That property is set (True). I just copied the existing nsOptions, I tried it with False as well.

The problems I see are:

1). there is no way to tell 'function lightbox(idx)' which slider the images are for.

2). there is no way to tell id="fsBtn" which slider the lightbox applies to

3). 'function fsIconClick(isFullscreen)' has "ninja-slider" hardcoded in it, so for multiple sliders you cant say which one it applies to.

I have added code to solve 1) and 2), but unable to for 3).

Most importantly... even if you only have just 1 slider, if you rename it everywhere to nsOptions1, #ninja-slider1, etc., it no longer displays correctly. Its selected, but isn't displayed full screen properly (only partially without any image), there are no side scroll bars, and it doesn't collapse. So I don't think it supports multiple sliders.

mark 4 months ago

For your 3) issue, I will pass in another parameter, ninjaSldr, into the fsIconClick function. Then the demo code in Demo 8 will be:

    function fsIconClick(isFullscreen, ninjsSldr) {
        //Note: fsIconClick is the default event handler of the fullscreen button
        if (isFullscreen) {
            ninjaSldr.parentNode.style.display = "none";
        }
    }

Please pay attention to the Demo 8 page. If its code has been changed to the above code, you can download the package again and using the new ninja-slider.js inside the package.

For the not collapsing issues, I wonder if you have updated the CSS files properly. Would you please create a testing page that contains two sliders, then Zip the folder and send it to johnwcb1(at)gmail(dot)com?

If you are using lightbox, you need to initiate the slider by the lightbox's popup event handler, something like the onTabSelected Event Handler in www.menucool.com/jquery-tabs#Div3, or the lightbox(idx) function in Demo 8.

Milo 4 months ago

I'm trying to make several ninja sliders on one opage work as well an face the following problem:

Sliders 2 and 3 are displayed, but only with the first image and the expand button. They miss the prev/next arrows, and there is no way to click to the next image. The reason might be that the prev an next arrows are placed in divs with ids - but divs wit id can only be used once on a page, correct? Do you have an idea?

Robert 4 months ago

Just figured it out myself: You need to use one css file for every instance of ninja slider and use ninja-slider2 ... ninja-slider3 in every occurancy of ninja-slider within.

Robert 4 months ago

Your name*

Password

_{(Optional. Used to modify this post afterwords)}

+ =

Horizontal

Vertical

Tooltip Menu

CSS Tooltip

JavaScript Tooltip

CSS3 Tooltip Maker

Responsive Slider

JS Image Slider

Thumbnail Slider

Tabbed Content

Responsive Tabs

Float Panel

Super Panel

Color Picker

Responsive Image Grid

How to include multiple responsive image sliders in the same page

12 Answers

Ask your Own Question