Create Simple Text Slider / Rotator With CSS, Jquery Without Plugin

0 9,412

n this tutorial I am going to show you how to create simple text slider / rotator with CSS, Jquery without plugin. It is helpful for adding auto rotational testimonial on your website or you can slide any text based div you want with auto rotation and custom rotation speed and timer along with next previous buttons.

Create Simple Text Slider / Rotator With CSS, Jquery

HTML

Markup html for text slider in unordered list, In the below example under div container 3 li has been created with some quotes with author name and we need to auto slide these quotes after page load.

<div id="carousel">
  <div class="btn-bar">
    <div id="buttons"><a id="prev" href="#"><</a><a id="next" href="#">></a> </div></div>
    <div id="slides">
        <ul>
            <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase"><span class="quote-marks">"</span>
Be who you are and say what you feel because those who mind don't matter
 and those who matter don't mind.
<class="quote-marks">"</span>
 
                    </p>
                </div>
                <div class="authorContainer">
                    <p class="quote-author">
<a href="https://lyrics-quotes-status.com/quotes/search/author/Dr-Seuss?s=Dr.%20Seuss"
 target="_blank" style="color:#b14943;">
Dr. Seuss</a>
</p>
                </div>
            </li>
 
 <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase">
<span class="quote-marks">"</span>
Life has taught us that love does not consist in gazing at each other,
 but in looking outward together in the same direction.<class="quote-marks">"</span>
 
                    </p>
                </div>
                <div class="authorContainer">
                    <p class="quote-author">
<a href="https://lyrics-quotes-status.com/quotes/search/author/
Antoine-de-Saint-Exupery?s=Antoine%20de%20Saint-Exupery" target="_blank" style="color:#b14943;">
Antoine de Saint-Exupery</a></p>
                </div>
            </li>
 
 <li class="slide">
                <div class="quoteContainer">
                    <p class="quote-phrase"><span class="quote-marks">"</span>
Love is like a friendship caught on fire. In the beginning a flame,
 very pretty, often hot and fierce, but still only light and flickering. 
As love grows older, our hearts mature and our love becomes as coals, 
deep-burning and unquenchable.<class="quote-marks">"</span>
 
                    </p>
                </div>
                <div class="authorContainer">
                    <p class="quote-author">
<a href="https://lyrics-quotes-status.com/quotes/search/author/Bruce-Lee?s=Bruce%20Lee" 
target="_blank" style="color:#b14943;">Bruce Lee</a>
</p>
                </div>
            </li>
                    </ul>
    </div>

Leave A Reply

Your email address will not be published.