- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
Looped Slider
November 15, 2010
This is a Slider Script that could be used both for creating sliders and galleries. It is one of the most flexible slider scripts.
http://github.com/nathansearles/loopedSlider
JavaScript
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.
HTML
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.
CSS
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.
