This is a Slider Script that could be used both for creating sliders and galleries. It is one of the most flexible slider scripts.
In order to make the script work, the index-#.html file with a slider should contain these lines of HTML code in order to include loopedslider.js script and jQuery framework:
The <head> section of the index-#.html file contains these lines of code that initialize the script functionality with basic values:
This script is initialized with a <div> element with #loopedSlider id.
Below you can see the HTML script representation:
The whole slider is placed to a <div> tag with #loopedSlider id. Then there two container <div> tags: main container (.container class) and pagination container (.pagination-container class). A <div> tag with .slides class is placed into the main container and contains slider (or gallery) elements. So in order to add an extra slide (or gallery image) you will need to add the following coding structure:
Bulleted list (<ul> tag) with the .pagination class defines pagination output for the slider (or a gallery).
For loopedSlider version 0.5.4 and lower you have to add correspondent number of anchors (<a> tags), each slider should have a correspondent anchor.
For loopedSlider version 0.5.5 and newer the plug-in will add necessary scripting automatically.
You can find script related stylesheet in the main style.css file. You will need to modify the following styles:
Make sure to set the same width value for .container and .slides div styles.