How to insert multiple jQuery Carousels to one webpage

This tutorial will guide you how to insert more than one jQuery carousel to the same webpage.

Step 1 – Create multiple jQuery carousels with different carousel ID in Amazing Carousel

To insert multiple jQuery carousels to the same webpage, you need to create each carousel with a unique ID. In Amazing Carousel, Publish dialog, select the option Publish to Folder, then click Browse to select a folder to save the generated files.

  • You need to set up a unique Carousel ID for each carousel.
  • If you are going to save all of the generated carousels in one folder, you need to specify a unique filename for each carousel.

jQuery Carousel Creator

Step 2 – Copy or upload all of the generated files to your web server, same folder as your webpage

In this step, you need to copy or upload all of the generated files to your web server, same folder as your webpage. This includes the HTML files, the images folder and the carouselengine folder.

Multiple jQuery Carousels in Same Page

Step 3 – Edit and insert HTML codes into head section of your webpage

Open the generated HTML files with your HTML editor, copy the codes from head section and insert them to your webpage, just before </head> tag. You need to remove the duplicated references to jQuery.js and amazingcarousel.js from the codes of second carousel.

jQuery Carousel

Step 4 – Insert HTML codes into body section of your webpage, where you want to display the carousel

Copy body section HTML codes of each carousel and insert them to your web page where you want to display the carousel.

jQuery Carousel