Minimalist Quote Carousel Plugin With jQuery - simpleQuote

File Size: 5.15 KB
Views Total: 3155
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist Quote Carousel Plugin With jQuery - simpleQuote

simpleQuote is a very small text carousel plugin for jQuery that has the ability to fade/rotate through an html list of quotes at a certain speed.

How to use it:

1. Create a list of quotes and add author names using the author attribute as this:

<ul id="simpleQuote">

  <li id="display"> </li> 
  
  <li author="Chanakya"> Before you start some work, always ask yourself three questions - Why am I doing it, What the results might be and Will I be successful. Only when you think deeply and find satisfactory answers to these questions, go ahead. </li>

  <li author="DV Gundappa"> Life is a Horse driven cart, Fate its driver. You are the horse, Passengers - as allotted by God. Sometimes rides to a wedding, sometimes to the graveyard. On stumbling, there is always the earth.  </li>

  <li author="Srinivasa Ramanujan"> An equation means nothing to me unless it expresses a thought of God.  </li>  

  <li author="Patanjali">  Undisturbed calmness of mind is attained by cultivating friendliness toward the happy, compassion for the unhappy, delight in the virtuous, and indifference toward the wicked. </li>

</ul>

2. Download and place the JavaScript file jquery.simpleQuote.js after JQuery library:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.simpleQuote.js"></script> 

3. Call the function on the top element to render a default quote carousel on the webpage.

$("#simpleQuote").simpleQuote();

4. Specify the animation speed in milliseconds.

$("#simpleQuote").simpleQuote({ 
  speed : 5000 
});

5. If you want to hide the author names:

$("#simpleQuote").simpleQuote({ 
    speed : 5000 
  }, { 
    includeAuthor : true 
  }
);

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