JSFiddle - React, Tailwind, and code Playground

by Ender

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css">
<div id="slider"></div>
<div class="ui-corner-all" id="sliderContent">     
    <div class="viewer ui-corner-all">
        <div class="content-conveyor ui-helper-clearfix" style="width: 2128px;">
            
            <div class="item">
                <h2>Omega Nebula</h2>
                <img alt="Omega Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/omega.jpg">
            </div>
            
            <div class="item">
                <h2>Rosette Nebula</h2>
                <img alt="Rosette Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/rosette.jpg">
            </div>
            
            <div class="item">
                <h2>Ring Nebula</h2>
                <img alt="Ring Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/ring.jpg">
            </div>
            
            <div class="item">
                <h2>Tarantula Nebula</h2>
                <img alt="Tarantula Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/tarantula.jpg">
            </div>
            
            <div class="item">
                <h2>Triangulum Nebula</h2>
                <img alt="Triangulum Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/triangulum.jpg">
            </div>
            
            <div class="item">
                <h2>Eagle Nebula</h2>
                <img alt="Eagle Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/eagle.jpg">
            </div>
            
            <div class="item">
                <h2>Crab Nebula</h2>
                <img alt="Crab Nebula" src="http://d2o0t5hpnwv4c1.cloudfront.net/377_slider/slider_sourcefiles/images/crab.jpg">
            </div>
            
        </div>
   ...

CSS

#sliderContent .item { display: none; position: absolute; }

JavaScript

$(function() {
    $('#sliderContent .item:first').addClass('shown').show();
    $("#slider").slider({
        value: 0,
        min: 0,
        max: $('#sliderContent .item').size(),
        step: 1
    }).bind("slidechange", function(event, ui) {
        var newIndex = $("#slider").slider("value");
        var oldIndex = $('#sliderContent .item').index('.shown');
        if (newIndex != oldIndex) {
            $('.shown').fadeOut().removeClass('shown');
            $('#sliderContent .item').eq(newIndex).fadeIn().addClass('shown');
        }
    });

});