JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js">
</script>

<div id="actions">
    <a class="previous">&laquo; Back</a>

    <a class="next">More pictures &raquo;</a>
</div>

<div class="scrollable vertical">
     
    <!-- root element for the items -->
    <div class="items">
            <div class="item">
                asdasdasdasd
            </div>
            <div class="item">
                asdasdasdasd
            </div>
            <div class="item">
                asdasdasdasd
            </div>
    </div>
    
</div>

CSS

body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}


/* root element for scrollable */
.vertical {  
    
    /* required settings */
    position:relative;
    overflow:hidden;    

    /* vertical scrollers have typically larger height than width */    
    height: 100px;     
    width: 700px;    
    background-color:#CCC;
}

/* root element for scrollable items */
.items {    
    position:absolute;
    
    /* this time we have very large space for height */    
    height:20000em;    
    margin: 0px;
}

/* single scrollable item */
.item {
    margin:10px 0;
    padding:15px;
    font-size:12px;
    height:180px;
}


#actions {
    width:700px;
    margin:30px 0 10px 0;    
}

#actions a {
    font-size:11px;        
    cursor:pointer;
    color:#666;
}

#actions a:hover {
    text-decoration:underline;
    color:#000;
}

.disabled {
    visibility:hidden;        
}

.next {
    float:right;
}

JavaScript

$(function() {                
    $(".scrollable").scrollable({ 
        vertical: true, 
        next: '.next',
        prev: '.previous'
    });    
    
});