JSFiddle - React, Tailwind, and code Playground

by NinjaSk8ter

HTML

<div id="screen">
    <div class="navigations">
        <ul>
            <li><a href="#">Tab1</a></li>
            <li><a href="#">Tab2</a></li>
            <li><a href="#">Tab3</a></li>
            <li><a href="#">Tab4</a></li>
        </ul>
    </div>
    <div class="sectionss">
        <ul>
            <li>
                <h2>Startup Guide 1 Content Header</h2>
                <p>Startup Guide 1 Content</p>
            </li>
            <li>
                <h2>Startup Guide 2 Content Header</h2>
                <p>Startup Guide 2 Content 1</p>
                <p>Startup Guide 2 Content 2</p>
            </li>
            <li class="fallen">
                <h2>Startup Guide 3 Content Header</h2>
                <p>Startup Guide 3 Content 1</p>
                <p>Startup Guide 3 Content 2</p>
            </li>                
            <li>
                <h2>Startup Guide 4 Content Header</h2>
                <p>Startup Guide 3 Content 1</p>
                <p>Startup Guide 3 Content 2</p>
            </li>
        </ul>
    </div>
    <img class="prev" src="http://demos.flesler.com/jquery/serialScroll/img/prev.gif" alt="prev" width="42" height="53">
    <img class="next" src="http://demos.flesler.com/jquery/serialScroll/img/next.gif" alt="next" width="42" height="53">
</div>

<script type="text/javascript" src="http://entvibes.com/web/js/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="http://entvibes.com/web/js/jquery.serialScroll-min.js"></script>

CSS

body{ 
    padding: 0 5px;
    font-family: Verdana, sans-serif;
    background-color: #DDD;
}
ul, li, h4, h3, h2, h1, p{
    padding:0;
    margin:0;
    list-style:none;
}
.next, .prev{
    cursor:pointer;
}

#screen{
    position:relative;
    height:425px;
    width:546px;
    margin-top:10px;
    background-color:yellow;
}
#screen .next, #screen .prev{
    position:absolute;
    top:200px;
}
#screen .prev{
    left:10px;
}
#screen .next{
    right:10px;
}
#screen .clear{
    clear: both;
} 
}
.navigations {
    width:546px;
    /*text-align:center;*/
    /*margin-left:62px;*/
    background-color:orange;
}
.navigations ul{
    /*margin-left:55px !important;*/
    /*margin-left:35px;*/
    background-color:pink;
}
.navigations li{
    float:left;
    margin:0 15px;
    padding:10px 20px;
    background-color:grey;
}
.navigations a {
    color:green;
    font-weight:bolder;
    text-decoration:none;
}
.sectionss {
    overflow:hidden;
    background-color:red;
    /*width:600px;*/
    width:425px;
    height:350px;
    clear:left;
    margin-left:62px;
}
.sectionss p{
    width:550px;
    margin:16px 0;
    font-size:85%;
    line-height:1.4em;
    color:orange;
}
.sectionss h2{
    color:blue;
    margin:20px 0pt;
}
.sectionss ul{
    width:3660px;
}
.sectionss li{
    float:left;
    padding:11px 30px;
    background-color:olive;
}
/*#sectionss a{
    color:blue;
    font-weight:bolder;
    text-decoration:none;
}*/
/*#sections li.fallen{
    margin-top:369px;
}*/

JavaScript

jQuery.easing.easeOutQuart = function(x, t, b, c, d) {
    return -c * ((t = t / d - 1) * t * t * t - 1) + b;
};

jQuery(function($) {
    $('#screen').serialScroll({
        target: '.sectionss',
        items: 'li',
        prev: 'img.prev',
        next: 'img.next',
        axis: 'xy',
        // The default is 'y' scroll on both ways
        navigation: '.navigations li a',
        duration: 700,
        force: true,
        onBefore: function(e, elem, $pane, $items, pos) {
             e.preventDefault();
            if (this.blur) this.blur();
        },
        onAfter: function(elem) {
        }
    });
});