JSFiddle - React, Tailwind, and code Playground

by Jatin Patil

HTML

<script src="http://www.jqueryscript.net/demo/Carousel-Marquee-Like-List-Scrolling-Plguin-For-jQuery-Scrollbox/jquery.scrollbox.js"></script>
<div id="roller" class="scroll-img">
            <ul>
                <li><img src="http://coolone.frogcp.com/wordpress-3.6/wordpress/wp-content/uploads/2013/09/95731802-e1392659569779-768x1024.jpg"></li>                
                <li><img src="http://coolone.frogcp.com/wordpress-3.6/wordpress/wp-content/uploads/2013/09/95730910-1024x768.jpg"></li>                
                <li><img src="http://coolone.frogcp.com/wordpress-3.6/wordpress/wp-content/uploads/2013/09/95731640-1024x768.jpg"></li>
                <li><img src="http://coolone.frogcp.com/wordpress-3.6/wordpress/wp-content/uploads/2013/09/95730637-1024x768.jpg"></li>
            </ul>
        </div>

CSS

.scroll-img {
  border: 1px solid red;
  width: 600px;
   height:900px;
  overflow: hidden;
  font-size: 0;
}
.scroll-img ul {
    margin:0px;
    padding: 0px;
  width: 600px;
  height: 900px;
  margin: 0;
}
.scroll-img ul li {
    margin:0px;
    padding: 0px;
  display:inline-block;

    margin-bottom:500px;
}

.scroll-img ul li img {
    
    width:100%;
    
}

JavaScript

$('#roller').scrollbox({
    direction: 'h',
    switchItems: 1,
    distance: 0
  });