JSFiddle - React, Tailwind, and code Playground

by gryzzly

HTML

<script src="https://gryzzly.github.io/jQuery.scrollery/jquery.scrollTo-1.4.2.js"></script>
<script src="https://gryzzly.github.io/jQuery.scrollery/jquery.scrollery.js"></script>
<!-- 
# jQuery.scrollTo is attached to this HTML
# jQuery.scrollery is attached to this HTML
-->
<div class="scrollery example2"> 
    <ul> 
        <li> 
            <img src="http://lorempixel.com/400/200/nature/1/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/200/150/nature/2/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/300/200/nature/3/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/350/250/nature/4/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/300/200/nature/5/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/200/150/nature/6/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/400/200/nature/7/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/300/250/nature/8/"> 
        </li> 
        <li> 
            <img src="http://lorempixel.com/400/250/nature/3/"> 
        </li> 
    </ul> 
</div>

CSS

/* 
These rules should live in jQuery.scrollery.css,
they are required for proper functioning
*/
.scrollery {
    overflow:hidden;
}
    .scrollery ul {
        overflow-x:scroll;
        white-space:nowrap;
        font-size:0;
        list-style:none;
        position:relative;
    }
        .scrollery li {
            display:inline-block;
            *display:inline;
            *zoom:1;
            vertical-align:middle;
        }
/* 
These rules are purely presentetional,
they are only for the sake of eye-candy here,
change these all you want.

Note: please be aware that the gallery is currently
assuming that you have the same margins and paddings
on your items (images and list-items)
*/
.scrollery {
  border:2px solid #444;
  margin:30px auto;
  padding:10px;
  border-radius:10px;
}
  .scrollery li {
    padding:10px;
  }

JavaScript

$('.scrollery').scrollery();