bxCarousel

• Live Demo
• Download

This is a ‘Carousel’ Script. So-called ‘Carousel’ is a simple thumbnail gallery where slides are shown consequentially. bxCarousel is a jQuery carousel plug-in that provides the ability to specify how many elements are displayed at time. Also, the number of elements in which to move the slider can be specified. You can find full installation and configuration instructions by following the links.

JavaScript

In order to make the script work, the index-#.html file with a ‘carousel’ should contain these lines of HTML code: The section of the index-#.html file contains these lines of code that initialize the script functionality with basic values: Here the script initializes an element with the #example1 id with the following attributes: • display_num:4,- number of elements to be visible; • move:4, – number of elements to the shift the slides; • speed:500, – number in milliseconds it takes to finish slide animation; • margin:0, – right margin to be applied to each

element (do not include “px”); • auto:false, – automatically play slides without a user click; • auto_interval:2000, – the amount of time in milliseconds between each auto animation; • auto_dir:’next’, – direction of auto slideshow (options: ‘next’, ‘prev’); • auto_hover:false, – determines if the slideshow will stop when user hovers over slideshow; • next_text:’next’, – text to be used for the ‘next’ control; • next_image:”, – image to be used for the ‘next’ control; • prev_text:’prev’, – text to be used for the ‘prev’ control; • prev_image:”, – image to be used for the ‘prev’ control; • controls:true – determines if controls will be displayed.

HTML

Below you can see the HTML script representation:

CSS

You can find script related stylesheet in the main style.css file.