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

12,488

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>

 

CSS

Add some stylesheet on page for styling your text slider.

<style>
body{
background:#E96D65;
}
 
#carousel {
position: relative;
width:60%;
margin:0 auto;
}
 
#slides {
overflow: hidden;
position: relative;
width: 100%;
height: 250px;
}
 
#slides ul {
list-style: none;
width:100%;
height:250px;
margin: 0;
padding: 0;
position: relative;
}
 
 #slides li {
width:100%;
height:250px;
float:left;
text-align: center;
position: relative;
font-family:lato, sans-serif;
}
/* Styling for prev and next buttons */
.btn-bar{
    max-width: 346px;
    margin: 0 auto;
    display: block;
    position: relative;
    top: 40px;
    width: 100%;
}
 
 #buttons {
padding:0 0 5px 0;
float:right;
}
 
#buttons a {
text-align:center;
display:block;
font-size:50px;
float:left;
outline:0;
margin:0 60px;
color:#b14943;
text-decoration:none;
display:block;
padding:9px;
width:35px;
}
 
a#prev:hover, a#next:hover {
color:#FFF;
text-shadow:.5px 0px #b14943;  
}
 
.quote-phrase, .quote-author {
font-family:sans-serif;
font-weight:300;
display: table-cell;
vertical-align: middle;
padding: 5px 20px;
font-family:'Lato', Calibri, Arial, sans-serif;
}
 
.quote-phrase {
height: 200px;
font-size:24px;
color:#FFF;
font-style:italic;
text-shadow:.5px 0px #b14943;  
}
 
.quote-marks {
font-size:30px;
padding:0 3px 3px;
position:inherit;
}
 
.quote-author {
font-style:normal;
font-size:20px;
color:#b14943;
font-weight:400;
height: 30px;
}
 
.quoteContainer, .authorContainer {
display: table;
width: 100%;
}
</style>

JS

Finally write jquery code to make you text slider movable with custom speed, In below code you can set slider speed as per your need.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
    //rotation speed and timer
    var speed = 3000;
 
    var run = setInterval(rotate, speed);
    var slides = $('.slide');
    var container = $('#slides ul');
    var elm = container.find(':first-child').prop("tagName");
    var item_width = container.width();
    var previous = 'prev'; //id of previous button
    var next = 'next'; //id of next button
    slides.width(item_width); //set the slides to the correct pixel width
    container.parent().width(item_width);
    container.width(slides.length * item_width); //set the slides container to the correct total width
    container.find(elm + ':first').before(container.find(elm + ':last'));
    resetSlides();
 
 
    //if user clicked on prev button
 
    $('#buttons a').click(function (e) {
        //slide the item
 
        if (container.is(':animated')) {
            return false;
        }
        if (e.target.id == previous) {
            container.stop().animate({
                'left': 0
            }, 1500, function () {
                container.find(elm + ':first').before(container.find(elm + ':last'));
                resetSlides();
            });
        }
 
        if (e.target.id == next) {
            container.stop().animate({
                'left': item_width * -2
            }, 1500, function () {
                container.find(elm + ':last').after(container.find(elm + ':first'));
                resetSlides();
            });
        }
 
        //cancel the link behavior            
        return false;
 
    });
 
    //if mouse hover, pause the auto rotation, otherwise rotate it    
    container.parent().mouseenter(function () {
        clearInterval(run);
    }).mouseleave(function () {
        run = setInterval(rotate, speed);
    });
 
 
    function resetSlides() {
        //and adjust the container so current is in the frame
        container.css({
            'left': -1 * item_width
        });
    }
 
});
//a simple function to click next link
//a timer will call this function, and the rotation will begin
 
function rotate() {
    $('#next').click();
}
</script>