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.

bower install jquery-crotator

<script>
  $('#theElement').crotator();
</script>

Here theElement is the id of the tag for which we want the contents to be converted to a Slides.

<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 and tagClass 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 in timeOfExistence.

<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.