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>    
    <div class="quote-rotate">
      <p>Quote 2</p>
    </div>   
    <div class="quote-rotate">
      <p>Quote 3</p>
    </div>
  </div>
</div>

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="//code.jquery.com/jquery-3.0.0.min.js"></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;
      }
      spinner.quotes.removeClass("show");
      $(spinner.quotes[spinner.index]).addClass("show");
      spinner.dots.removeClass('dot-fill');
      $(spinner.dots[spinner.index]).addClass('dot-fill');
    },

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

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

$(document).ready(function() {
  spinner.initial();
  spinner.dotnav();
  interval = window.setInterval(spinner.auto, 3000);
});

---

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