Lightweight Automatic Text Rotator Plugin For jQuery - Quote-Spinner

File Size: 5.07 KB
Views Total: 2990
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Lightweight Automatic Text Rotator Plugin For jQuery - Quote-Spinner

A very small and easy-to-use jQuery plugin used for generating an automatic text rotator with a dot pagination which can be uses as a quote spinner. The plugin makes uses of CSS3 transitions to switch between a set of text contents with a fade In/out effect.

How to use it:

1. The basic HTML structure to create a quote spinner:

<div class="quotes">
  <div class="quote-dots"></div>
  <div class="quote-contain">
    <div class="quote-rotate">
      <p>Quote 1</p>
    <div class="quote-rotate">
      <p>Quote 2</p>
    <div class="quote-rotate">
      <p>Quote 3</p>

2. The primary CSS/CSS3 rules to style the quote spinner:

.quote-rotate {
  position: absolute;
  top: 10px;
  opacity: 0;
  overflow: visible;
  visibility: hidden;
  transition: opacity, 0.3s, ease;
  padding-bottom: 10px;
 font-family: $font-brand-lighter;

.quote-dots {
  margin: 0 auto;
  text-align: center;

.nav-dot {
  height: 10px;
  width: 10px;
  border-radius: 50px;
  border: 1px solid black;
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;

.quotes {
  position: relative;
  margin: 50px auto 0px;
  max-width: 500px;
  position: relative;

.show {
  opacity: 1;
  visibility: visible;

.dot-fill { background-color: black; }

.nav-dot:last-of-type { margin: 0; }

3. Load the latest version of jQuery library from a CDN.

<script src="//"></script>

4. The JavaScript (jQuery script) to active the quote spinner.

var spinner = {
    index: 0,
    auto: function(currentIndex) {
      if (currentIndex != undefined) {
        spinner.index = currentIndex % spinner.quotes.length;
      } else {
        spinner.index = (spinner.index + 1) % spinner.quotes.length;

    initial: function(){
      this.quotes = $(".quote-rotate");
      this.images = $(".quote-image");
      for (i = 0; i < spinner.quotes.length; i++) {
        $('.quote-dots').append('<div class="nav-dot"></div>');
      this.dots = $(".nav-dot");

    dotnav: function(){
      $(spinner.dots).on("click", function(){
        var currentIndex = $(spinner.dots).index(this);;
        interval = window.setInterval(, 6500);

$(document).ready(function() {
  interval = window.setInterval(, 3000);

This awesome jQuery plugin is developed by tcober. For more Advanced Usages, please check the demo page or visit the official website.