JSFiddle - React, Tailwind, and code Playground

by gryzzly

HTML

<ul class="scrollery">
    <li>
        <img src="http://lorempixum.com/400/200/abstract/1/">
    </li>
    <li>
        <img src="http://lorempixum.com/200/150/abstract/2/">
    </li> 
    <li>
        <img src="http://lorempixum.com/300/200/abstract/3/">
    </li>
    <li>
        <img src="http://lorempixum.com/350/250/abstract/4/">
    </li>
    <li>
        <img src="http://lorempixum.com/300/200/abstract/5/">
    </li>
    <li>
        <img src="http://lorempixum.com/200/150/abstract/6/">
    </li>
    <li>
        <img src="http://lorempixum.com/400/200/abstract/7/">
    </li>
    <li>
        <img src="http://lorempixum.com/300/250/abstract/8/">
    </li>
    <li>
        <img src="http://lorempixum.com/400/250/abstract/9/">
    </li>
    <li>
        <img src="http://lorempixum.com/300/200/abstract/10/">
    </li>
</ul>
<script src="http://gryzzly.github.com/jQuery.scrollery/jquery.scrollTo-1.4.2.js"></script>
<script src="http://gryzzly.github.com/jQuery.scrollery/jquery.scrollery-0.1.js"></script>

CSS

/* this is needed for the gallery to work */
.scrollery {
    overflow-x:scroll;
    white-space:nowrap;
    font-size:0;
    list-style:none;
}
    .scrollery li {
        display:inline-block;
        *display:inline;
        *zoom:1;
        vertical-align:middle;
    }
/* these are only presentational styles */
.scrollery {
      border:2px solid #444;
      margin:30px auto;
      padding:10px;
      border-radius:10px;
    }
      .scrollery li {
        padding:10px;
      }

JavaScript

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