JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<script src="http://jqueryfordesigners.com/demo/jquery-ui-full-1.5.2.min.js"></script>
<div id="container">        
    <h1>Slider Gallery</h1>        
    <p>This shows a demonstration of a slider widget from the jQuery UI library used to create the same effect used on 
        <a href="http://www.apple.com/mac/">Apple's web site</a>.
    </p>        
    <p>
        <a href="/slider-gallery">Read the article, and see the screencast this demonstration relates to</a>
    </p>        
    <div class="sliderGallery">            
        <ul>                
            <li><img class="pb-airportexpress" src="http://static.jqueryfordesigners.com/demo/images/pb_airport_express.jpg" /></li>                <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_airport_extreme.jpg" /></li>                <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_timecapsule_20080115.jpg" /></li>                <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_keyboards20070807.jpg" /></li>                <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_mighty_mouse.jpg" /></li>                <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_cinema_display20071026.jpg" /></li>                <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_mac_pro_20070622.jpg" /></li>                <li><img class="pb-macmini" src="http://static.jqueryfordesigners.com/demo/images/pb_mac_mini.jpg" /></li>                <li><img src="http://static.jqueryfordesigners.com/demo/images/pb_macbook20071026.jpg" /></li>                <li><img class="pb-macbookair" src="http://static.jqueryfordesigners.com/demo/images/pb_macbookair_20080115.jpg" /></li>                <li><img class="pb-macbookpro" src="http://static.jqueryfordesigners.com/demo/images/pb_macbook_pro20071026.jpg" /></li>                <li><img class="pb-imac" src="http://static.jqueryfordesigners.com/demo/images/pb_imac20071026.jpg" /></li>    ...

CSS

body {            
    padding: 0;             
    font: 1em "Trebuchet MS", verdana, arial, sans-serif;             
    font-size: 100%;            
    background-color: #212121;            
    margin: 0;        
}        
h1 {             
    margin-bottom: 2px;         
}        
#container {            
    background-color: #fff;            
    width: 580px;            
    margin: 15px auto;            
    padding: 50px;        
}                
/* slider specific CSS */        
.sliderGallery {            
    background: url(http://static.jqueryfordesigners.com/demo/images/productbrowser_background_20070622.jpg) no-repeat;            
    overflow: hidden;            
    position: relative;            
    padding: 10px;            
    height: 160px;            
    width: 560px;        
}                
.sliderGallery UL {            
    position: absolute;            
    list-style: none;            
    overflow: none;            
    white-space: nowrap;            
    padding: 0;            
    margin: 0;        
}                
.sliderGallery UL LI {            
    display: inline;        
}                
.slider {            
    width: 542px;            
    height: 17px;            
    margin-top: 140px;            
    margin-left: 5px;            
    padding: 1px;            
    position: relative;            
    background: url(http://static.jqueryfordesigners.com/demo/images/productbrowser_scrollbar_20070622.png) no-repeat;       
}               
.handle {            
    position: absolute;            
    cursor: move;            
    height: 17px;            
    width: 181px;            
    top: 0;            
    background: url(http://static.jqueryfordesigners.com/demo/images/productbrowser_scroller_20080115.png) no-repeat;            
    z-index: 100;        
}                
.slider span {            
    color: #bbb;            
    font-size: 80%;            
    cursor: pointer;            
    position:...

JavaScript

$(function () {            var container = $('div.sliderGallery');            var ul = $('ul', container);                        var itemsWidth = ul.innerWidth() - container.outerWidth();                        $('.slider', container).slider({                min: 0,                max: itemsWidth,                handle: '.handle',                stop: function (event, ui) {                    ul.animate({'left' : ui.value * -1}, 500);                },                slide: function (event, ui) {                    ul.css('left', ui.value * -1);                }            });        });