JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
<div class="editorial" id="news-container">
<ul>
<li>
<!-- This is the slide show-->
<div class="inner_detail">
<!--First book-->
<div><img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image1.jpg">
<h1>Thrilling, Brave, and Controversial</h1>
<span>30 Pieces of Silver: An Extremely Controversial Historical Thriller</span>
</div>
<!--Second book-->
<div><img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image2.jpg">
<h1>Not quite What I Expected.</h1>
<span>The Book of Shadows : The Unofficial Charmed Companion</span>
</div>
<!--Third book-->
<div><img src="http://platform-testing4.s3.amazonaws.com/amazon/books/BR_Image3.jpg">
<h1>I would give it many more than five stars.</h1>
<span>The Red Tent</span>
</div>
</div>
<!-- slide show Ends-->
</li>
<li> 2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info </li>
<li> 3) Lorem ipsum dolor sit amet more info more info more info more info </li>
</ul>
</div>
CSS
.editorial {
padding:0 6px; vertical-align:top
}
section div.image{
vertical-align:top; border:none !important;
}
section div.inner_detail, .inner_detail div{
margin:0; padding:0; border:none !important; width:100%
}
.inner_detail h1{
font-size:11px; font-family:Verdana, Geneva, sans-serif;
margin:0;
padding:0
}
.inner_detail span{
font-size:10px; font-family:Verdana, Geneva, sans-serif;
}
.inner_detail img{
float:left; vertical-align:top; margin:0 6px; height:36px
}
#news-container {
width: 100%; height:40px !important;
}
#news-container ul{
margin:0; vertical-align:top;
padding:0; width:100%;
}
#news-container ul li {
list-style:none;
width:100% !important; padding:0; margin:0; height:50px;
background:#fcf9d9
}
.inner_detail div{
display:none;
width:100%
}
JavaScript
var quotes = $(".inner_detail div");
var quoteIndex = -1;
function showNextQuote() {
++quoteIndex;
quotes.eq(quoteIndex % quotes.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showNextQuote);
}
showNextQuote();
//Slider
$('#news-container').vTicker({
speed: 800,
pause: 3000,
animation: 'fade',
mousePause: false,
showItems: 1
});