Looped Carousel is a jQuery carousel plugin that provides a simple image gallery functionality.
JavaScript
First we need to include the jQuery
framework and the loopedcarousel.js file:
The section of the index-#.
html file contains these lines of code that initialize the
script functionality with basic values:
The
script initializes an element with the id loopedCarousel, which can have some additional settings:
container: ‘.container’ – class/id for the
carousel block
slides: ‘.slides’ – class/id for slides block
pagination: ‘.
pagination’ – class/id for
pagination block
autoStart: 0 – if set to 1 – auto start
slidespeed: 300 – delay between slides animation in milliseconds
fadespeed: 300 – fade animation speed
items: 3 – number of items to be displayed
padding: 10 – distance between elements
showPagination: true – show
pagination
vertical: false/true – for vertical animation
HTML
Below you can see general
HTML script representation:
CSS
You can find
script related
stylesheet in the main style.css file.