Tutorial: jQuery quote rotator with a nice progress indicator

Creating QuotesRotator – a jQuery quote rotator with a nice progress indicator, responsive and easy to use.

Tutorial – jQuery quote rotator plugin

The Quote Rotator plugin, created in mentioned tutorial, is a small jQuery component for creating a quote rotator widget.

It has a pleasant fade transitions (animation), a slim progress bar, and there is autoplay functionality. The plugin can be used as a text rotator, banner rotator, news ticker, etc.

Above the content, there is a nice progress indicator. There are also small media queries applied, to resize the content for smaller screens.

Creating a jQuery quote rotator
Creating a jQuery quote rotator

The plugin is easy to use. Simply handles the HTML structure, as follows:

<div id="cbp-qtrotator" class="cbp-qtrotator">
  <div class="cbp-qtcontent">
    <img src="images/1.jpg" alt="img01" />
    <blockquote>
      <p>Lorem ipsum dolor sit amet...</p>
      <footer>Pino Caruso</footer>
    </blockquote>
  </div>

  <div class="cbp-qtcontent">
  ...
  </div>

  <div class="cbp-qtcontent">
  ...
  </div>

...
</div>

Demo:

http://tympanus.net/Blueprints/QuotesRotator

Tutorial:

http://tympanus.net/codrops/2013/03/29/quotes-rotator

GitHub:

https://github.com/andrewbiggart/jquery-quote-rotator

You may also like:

Creating 3D rotatable objects with jQuery Interactive 3D plugin

Slim progress bar jQuery plugin – NProgress

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1