Multiple ISM sliders on one page

Typically, a website design incorporates a single content slider towards the top of a page, but what if you wanted two or more sliders on the same page?

When you use Image Slider Maker to generate a slider, the HTML element is assigned an ID. By default the ID is "my-slider". This ID is used in the generated CSS to assign style rules to the specific slider.

If you intend on using multiple sliders on one page, then you must provide a different ID for each one.

The ID text box is located below the tool's controls on the left-hand side.

Simply change the value of the ID for each slider you generate, for example: "slider-1", "slider2", "topslider", "product-showcase", etc. The ID you enter will be reflected in both the generated HTML and in the generated CSS.

Tip: If you create a slider and forget to enter a unqiue ID, you can edit your HTML and set it manually. You will also need to perform a search and replace on the CSS.

To integrate multiple sliders into a page include the ISM JavaScript (e.g. ism-2.2.min.js) once. For the CSS, you can either manually merge the generated my-slider.css files into one file or rename them and include them separately. As for the slide images, either edit the path for each slide image or copy all images into the same directory, for example ism/image/slides/.

There is no limit to the number of sliders you can have on a page, just bear in mind that you could experience performance issues if you have too many!