Image Slider Using Cycle2

If you have more than one cover photo to use on a home page, but can't decide which to use, why not display all of the with the help of a jQuery image slider? Of course, image sliders can also be used for galleries and advertisements.

Step 1: Set Up jQuery

Download and install jQuery or provide a link to the external script if you have not already done so (see instructions on the Home page).

Step 2: HTML and Placing the Images

Place images in the "images" folder within the root directory. Find a spot on the webpage where the image slide is to be placed and display the image one after another within a <div> in the order in which they are to appear in the slider (see example below for div class and attributes). For best results, all images should be of the some size (width and height). The speed of the scroll can be adjusted by changing the value of "data-cycle-speed" in the <div> tag (value is in milliseconds). In the example used on this page:

		
   <div class="slides cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-pause-on-hover="true" data-cycle-speed="450" data-cycle-prev="#prev" data-cycle-next="#next">  
   <img src="images/alvenhs_books.jpg" height="768" />
   <img src="images/gem_zellers.jpg" height="768" />
   <img src="images/four_leaf_clover.jpg" height="768" />
   <div>
		
	

Step 3: Installing the Plug-In

To obtain the Image Cycle plugin, go to http://jquery.malsup.com/cycle2 or download directly from this link: http://malsup.github.io/min/jquery.cycle2.min.js Place the file in the "scripts" folder and provide script path AFTER the main jQuery file link:

		
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
   <script src="scripts/jquery.cycle2.min.js"></script>
   </body>
		
	

Step 4: Styling

The slider container may be styled and positioned using the class .slides and styled as if it were a single image. In this example:

		
   .slides {
   border: 5px solid white;
   box-shadow: 0 0 8px black;
   width: 800px;
   margin: 25px auto;
   display: block;
   }
		
	

Images by Alvenh Channe.