Jquery Crotator

A jQuery plugin for creating a slider or content rotator.

View project on GitHub

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

Darkness cannot drive out darkness: Only light can do that. Hate cannot drive out hate: Only love can do that.

Live as if you were to die tomorrow. Learn as if you were to live forever.

Yesterday is history, tomorrow is mystery, today is a gift of god, which is why we call it the present.

Not all of us can do great things. But we can do small things with great love.

Imagination is more important than knowledge. Knowledge is limited. Imagination encircles the world.

The woods are lovely, dark, and deep, but I have promises to keep, and miles to go before I sleep, and miles to go before I sleep.

Usage

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

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.