JSFiddle - React, Tailwind, and code Playground
HTML
<div class='infoquote'>
<div id="quotecontainer_1" class="quotecontainer">
<div class="quotewrapper quote_1">Quote #1
<span class="quoteholder">- QuoteHolder #1</span>
</div>
<div class="quotewrapper quote_2">Quote #2
<span class="quoteholder">- QuoteHolder #2</span>
</div>
<div class="quotewrapper quote_3">Quote #3
<span class="quoteholder">- QuoteHolder #3</span>
</div>
<div class="quotewrapper quote_4">Quote #4
<span class="quoteholder">- QuoteHolder #4</span>
</div>
</div>
</div>
<br/><br/>
<div class='infoquote'>
<div id="quotecontainer_2" class="quotecontainer">
<div class="quotewrapper quote_1">Quote #1
<span class="quoteholder">- QuoteHolder #1</span>
</div>
<div class="quotewrapper quote_2">Quote #2
<span class="quoteholder">- QuoteHolder #2</span>
</div>
<div class="quotewrapper quote_3">Quote #3
<span class="quoteholder">- QuoteHolder #3</span>
</div>
<div class="quotewrapper quote_4">Quote #4
<span class="quoteholder">- QuoteHolder #4</span>
</div>
</div>
</div>
CSS
.infoquote{
height: 50px;
width: 150px;
padding-top: 0px;
padding-left: 7px;
font-style: italic;
padding-right: 7px;
overflow: hidden;
position: relative;
}
.quotewrapper{
width: 150px;
margin-right: 10px;
float:left;
}
.quotecontainer{
position: relative;
width: 320px;
left:0;
font-size: 80%;
}
.quoteholder{
float: right;
padding-top: 3px;
font-style: normal;
}
JavaScript
$totalleft = 0;
function quoteSlide(divname){
$total = ($(divname+" > div").size())
$width = $total * 160;
$(divname).css('width', ($width));
if ($width - 160 > $totalleft *-1){
$currentleft = $(divname).css('left');
$step = -160;
$totalleft = parseInt($currentleft)+$step;
}else{
$totalleft = 0;
}
$(divname).animate(
{
left: $totalleft
},
'slow',
'swing',
function() {
});
}
quoteSlide('#quotecontainer_1');
quoteSlide('#quotecontainer_2');
setInterval(function() {
quoteSlide('#quotecontainer_1');
quoteSlide('#quotecontainer_2');
}, 3400);