JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<!-- Full version of jQuery Tools + jQuery 1.3.2 -->
<script src="http://cdn.jquerytools.org/1.1.2/full/jquery.tools.min.js"></script>



<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/scrollable-navig.css" />
    <!-- main navigator -->
    <ul id="main_navi">
        <li>
            <img src="http://farm4.static.flickr.com/3278/2691545308_e7e817afb0_s.jpg"/>
            <strong>Seagram Building</strong>
            New York City, United States
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/3624/3323893148_8318838fbd_s.jpg"/>
            <strong>Barcelona Pavilion</strong>
            Barcelona, Spain
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/40/122343298_22333fb8e3_s.jpg" />
            <strong>New National Gallery</strong>
            Berlin, Germany
        </li>
    </ul>
    
    <!-- root element for the main scrollable -->
    <div id="main">
        
        <!-- root element for pages -->
        <div id="pages">
            
            <!-- page #1 -->
            <div class="page">
                
                <!-- sub navigator #1 -->
                <div class="navi"></div>
                
                <!-- inner scrollable #1 -->
                <div class="scrollable">
                    
                    <!-- root element for scrollable items -->
                    <div class="items">
                        
                        <!-- items  -->
                        <div class="item">
                            <img src="http://farm1.static.flickr.com/114/299183878_4feac12b04.jpg" />
                        </div>
                        <div class="item">
                           <!-- <img src="http://farm1.static.flickr.com/200/507751258_5f13e3d802.jpg" /> -->
                                <div class="child">
                                    <p>This is the first box with text.</p>
                             ...

CSS

/* main vertical scroll */
#main {
    position:relative;
    overflow:hidden;
    height: 450px;
}

/* root element for pages */
#pages {
    position:absolute;
    height:20000em;
}

/* single page */
.page {
    padding:10px;
    height: 450px;
    background:#222 url(http://static.flowplayer.org/img/global/gradient/h600.png) 0 0 repeat-x;
    width:520px;
}

/* root element for horizontal scrollables */
.scrollable {
    position:relative;
    overflow:hidden;
    width: 510px;
    height: 450px;
}

/* root element for scrollable items */
.scrollable .items {
    width:20000em;
    position:absolute;
    clear:both;
}

/* single scrollable item */
.item {
    float:left;
    cursor:pointer;
    width:500px;
    height:450px;
    padding:10px;
}

/* main navigator */
#main_navi {
    float:left;
    padding:0px !important;
    margin:0px !important;
}

#main_navi li {
    background-color:#333;
    border-top:1px solid #666;
    clear:both;
    color:#FFFFFF;
    font-size:12px;
    height:75px;
    list-style-type:none;
    padding:10px;
    width:190px;
    cursor:pointer;
}

#main_navi li:hover {
    background-color:#444;
}

#main_navi li.active {
    background-color:#555;
}

#main_navi img {
    float:left;
    margin-right:10px;
}

#main_navi strong {
    display:block;
}

#main div.navi {
    margin-left:250px;
    cursor:pointer;
}

JavaScript

// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(document).ready(function() {



    // main vertical scroll
    $("#main").scrollable({

        // basic settings
        vertical: true,
        size: 1,
        clickable: false,

        // up/down keys will always control this scrollable
        keyboard: 'static',

        // assign left/right keys to the actively viewed scrollable
        onSeek: function(event, i) {
            horizontal.scrollable(i).focus();
        }

        // main navigator (thumbnail images)
    }).navigator("#main_navi");

    // horizontal scrollables. each one is circular and has its own navigator instance
    var horizontal = $(".scrollable").scrollable({
        size: 1
    }).circular().navigator(".navi");


    // when page loads setup keyboard focus on the first horzontal scrollable
    horizontal.eq(0).scrollable().focus();

});