jQuery text / Quote / testimonial spinner plug-in: 2 demos

Rotating text by using jQuery plug-in

The text spinner plug-in which is based on jQuery can be used for rotating the quotes or testimonials etc. in your web pages.

If your web page has less space where you want to show more quotes or testimonials by the customers in rotating manners, this plug-in, Quote-Spinner, can be a good choice.

The size of the JS file is only 2Kb. Have a look at the demos below for looking live or using in your website.

 

A demo of jQuery text rotation plug-in

In this example, four quotes are created that are placed inside the HTML <p> tags. The paragraph tags are used inside the main <div> with quote-dots class. The inner div is given the quote-contain class while the paragraphs with quotes are given inside the third div with quote-rotate class. Have a look:

jquery text

See online demo and code

You can see, the four circles are also appearing while the current quote’s circle is highlighted (just like carousel or slider). To implement this text rotation in your web pages by using this plug-in, include the JS file after downloading the plug-in in the <head> section:

 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

<script src=”js/quotespinner/quotespinner.js”></script>

You may get the plug-in from the Github website here or get the JS file by view source the demo page and find the quotespinner.js file.

The <style> section contains the CSS for the quotation area that you may adjust according to your need.

In the markup section, use the CSS classes in <div> tags as mentioned earlier:

   <div class="quotes">

      <div class="quote-dots"></div>

      <div class="quote-contain">

        <div class="quote-rotate">

        <p>&ldquo;The quote of a famous personality, customer testimonials or any other text that you want to rotate comes here&rdquo;</p>

        </div>

 

        <div class="quote-rotate">

        <p>&ldquo;The quote of a famous personality, customer testimonials or any other text that you want to rotate comes here. The quote of a famous personality, customer testimonials or any other text that you want to rotate comes here&rdquo;</p>

        </div>

 

        <div class="quote-rotate">

        <p>&ldquo;The quote of a famous personality, customer testimonials or any other text that you want to rotate comes here&rdquo;</p>

        </div>

 

        <div class="quote-rotate">

        <p>&ldquo;The quote of a famous personality, customer testimonials or any other text that you want to rotate comes here&rdquo;</p>

        </div>

      </div>

    </div>

 

Get the complete code from the demo page.

A demo with styling quote area and circles

In this demo, the text is presented differently along with circles by modifying the CSS in above example. For that, a few properties are added in the .quote-rotate class. That class deals with the text area where I added the background, border-radius, border and transform-origin CSS 3 property.

For changing the circles’ size and color, find the nav-dot and dot-fill classes and change the height / width and background color as you want:

jquery text spinner CSS

See online demo and code

Following is the CSS used in above example while rest of the code remains the same:

    <style>

      p {

        font-family: 'PT Serif', serif;

        font-size: 20px;

        font-style: italic;

        font-weight: 400;

        text-align: center;

      }  

      .quote-rotate {

        position: absolute;

 

        opacity: 0;

        overflow: visible;

        visibility: hidden;

        transition: opacity, 0.3s, ease;

        padding-bottom: 10px;

        border:1px solid black;

        border-top:none;

        background: #00D5D5;

        border: 1px solid #d3d3d3;

        border-radius: 10px 10px 0 2px;

        transform-origin: left center 0;

 

      }

      .quote-dots {

        margin: 0 auto;

        text-align: center;

      }

      .nav-dot {

        height: 20px;

        width: 20px;

        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: #408080; }

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

    </style>

 

Get the complete from the example page.