JSFiddle - React, Tailwind, and code Playground

by bowheart

HTML

<div id="carousel">
    <div id="buttons"><a id="prev" href="#">prev</a><a id="next" href="#">next</a> &nbsp; &nbsp; &nbsp; &nbsp;
        <div class="clear"></div>
    </div>
    
    <div class="clear"></div>
    
    <div id="slides">
        <ul>
            <li>
                <div class="quote-container">
                    <p class="quote-phrase"><span class="quote-marks">"</span>DonorPro is so very Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem. <span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.</span></span></span>&nbsp;1<span class="quote-marks">"</span></p>
                    
                    <p class="quote-author">A Satisfied Customer</p>
                </div>
            </li>
            
            <li>
                <div class="quote-container">
                    <p class="quote-phrase"><span class="quote-marks">"</span>DonorPro is so very Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem. <span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.&nbsp;<span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem.</span></span></span></span></span>&nbsp;2<span class="quote-marks">"</span></p>
                    
                    <p class="quote-author">A Second Satisfied Customer</p>
                </div>
            </li>
            
            <li>
                <div class="quote-container">
                    <p class="quote-phrase"><span class="quote-marks">"</span>DonorPro is so very Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum Set Dolor Lorem. <span>Lorem Ipsum Dolor Set Ipsum Lorem Dolor Ipsum...

CSS

#carousel {
    width:80%;
    height:310px;    
    margin:0 auto;
}
#slides {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 310px;
    border: 1px solid #ccc;
}
/* remove the list styles, width : item width * total items */    
#slides ul {
    position:relative;
    left: 0;
    top:0;
    list-style:none;
    margin:0;
    padding:0;    
    width:300%;            
}
/* width of the item, in this case I put 250x250x gif */
#slides li {
    width: calc(100% / 3);
    height:250px;    
    float:left;
}
#slides li:nth
#slides li .quote-container{
    width: 100%;
    display: block;
    float: none;
    padding: 0px 10px;
    margin-top: -45px;
}

/* Styling for prev and next buttons */
#buttons {
    padding:0 0 5px 0;    
    float:right;
}
#buttons a {
    display:block; 
    width:31px; 
    height:32px;
    /* text-indent:-999em; */
    float:left;
    outline:0;
}
a#prev {
    background:url(arrow.gif) 0 -31px no-repeat; 
}
a#prev:hover {
    background:url(arrow.gif) 0 0 no-repeat;
}
a#next {
    background:url(arrow.gif) -32px -31px no-repeat; 
}
a#next:hover {
    background:url(arrow.gif) -32px 0 no-repeat;
}
.clear {clear:both}

.quote-phrase, .quote-author{
    text-align:center;
    font-family:sans-serif;
    font-style:italic;
    font-size:18px;
    padding:25px 25px 0px 25px;
    font-weight:300;
}

.quote-marks{
    font-size:20px;
    padding:3px;
}

.quote-author{
    padding:5px;
    font-style:normal;
    font-size:14px;
    color:#afafaf;
    font-weight:400;
}

JavaScript

$(document).ready(function() {
    //rotation speed and timer
    var speed = 3000;
    var run = setInterval('rotate()', speed);    
    
    //grab the width and calculate left value
    var item_width = $('#slides li').outerWidth(); 
    var left_value = item_width * (-1); 
        
    //move the last item before first item, just in case user click prev button
    $('#slides li:first').before($('#slides li:last'));
    
    //set the default item to the correct position 
    $('#slides ul').css({'left' : left_value});
    //if user clicked on prev button
    $('#prev').click(function() {
        if ($('#slides ul').is(':animated')) return false;
        clearInterval(run);
        //slide the item            
        $('#slides ul').stop().animate({'left' : 0}, 1500,function(){
            //move the last item and put it as first item                
            $('#slides li:first').before($('#slides li:last').detach());           
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
            run = setInterval('rotate()', speed);
        });
        //cancel the link behavior            
        return false;
            
    });
    //if user clicked on next button
    $('#next').click(function() {
        if ($('#slides ul').is(':animated')) return false;
        clearInterval(run);
        //slide the item
        $('#slides ul').stop().animate({'left' : -item_width * 2}, 1500, function () {
            //move the first item and put it as last item
            $('#slides li:last').after($('#slides li:first').detach());                     
            
            //set the default item to correct position
            $('#slides ul').css({'left' : left_value});
            run = setInterval('rotate()', speed);
        });
                 
        //cancel the link behavior
        return false;
        
    });        
    
    //if mouse hover, pause the auto rotation, otherwise rotate it
   ...