JSFiddle - React, Tailwind, and code Playground

by nicholaschris

HTML

<script src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
<div class="editorial" id="news-container">
    <ul>
          <li> 2) Lorem ipsum dolor sit amet, consectetur adipiscing elit. more info </li>
      <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> 3) Lorem ipsum dolor sit amet more info more info more info more info </li>
              
               <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-->
          ...

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();