jQuery - Crotator
A jQuery plugin for creating a slider or content rotator. It converts the children inside any selected element into a Slider. One can define array of timeline according to which the slider will be synced. CSS animations can be used with this plugin to enhance the contents visually.
Demo
Usage
Setup
bower install jquery-crotator
Standard call with default settings:
<script> $('#theElement').crotator(); </script>
Here theElement
is the id of the tag for which we want the contents to be converted to a Slides.
Call with options:
<script> $('#theElement').crotator({ timeOfExistence: 2, // in seconds typeofTag: "<h4/>", tagClass: "elClass", cycle: true, // true, false startEmpty: false // true, false }); </script>
timeOfExistence
decides what should be the duration of time for which a slide will be visible.typeofTag
andtagClass
respectively decide the tag and class of the tag that enclose the slide content.cycle
turns on/off looping back to the starting slide.startEmpty
decides whether there should be an element displayed when the page loads or contents starts appearing after the time given intimeOfExistence
.
Call with user defined array of timeline
<script> $('#theElement').crotator({ // timeline (in seconds) timeArray: [2, 20, 14, 9, 3, 10], typeofTag: "<h4/>", tagClass: "elClass", }); </script>
timeArray
is in seconds. The length of timeArray
should be equal to the number of children present in theElement
.
For more clarity, the example folder can be checked.