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

<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>

<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>

<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>