How to Make an Image Carousel With jQuery

You can use a jQuery plug-in on your Web page to make an image carousel. This function allows you to display a large number of images on your page, without cluttering the page. The carousel will cycle through all of the images that you define in your HTML code, but will only display two images at the same time. Visitors to your page can then click the "Previous" and "Next" buttons to scroll through all of the images that you have defined in your code.

Instructions

1. • 1
     Open a Web browser window, then go to the jQuery Infinite Carousel download page at Google.com.
   • 2
     Click the "jquery-infinite-carousel.zip" link at the center of the window, then save the file to your computer.
   • 3
     Right-click the downloaded file, click "Extract All," then click "Extract." This will create a new "jquery-infinite-carousel" folder.
   • 4
     Double-click the "jquery-infinite-carousel" folder, then double-click the "Demos" folder.
   • 5
     Right-click the "Index" file, click "Open With," then click your preferred Web editing program. After the file opens in your selected program, click the "Code" option, if your program has that feature.
   • 6
     Scroll to the "<li>1</li>" text.
   • 7
     Replace the "1" with the "<img>" HTML code of the image that you want to appear first in the carousel. For example, if the image is located in the images folder of your website, your HTML might look like "<li><img src="http://www.mysite.com/images/image-1.jpg" alt="Carousel Image 1" height="100" width="100" /></li>."
   • 8
     Continue replacing each "<li>" item in this section with the code for an image that you want to include in your carousel. You can also add more "<li>" items to include more images in the carousel.
   • 9
     Delete any unwanted code from the sample file, such as the code contained within the "<div class="demo">" object.
   • 10
     Click "File" at the top of the window, then click "Save" to apply your changes.