JSFiddle - React, Tailwind, and code Playground

http://css-tricks.com/forums/discussion/23255/jquery-slider-div

by Jennifer Perrin

HTML

<ul>
    <li><a href="#one">One</a>
    </li>
    <li><a href="#two">Two</a>
    </li>
    <li><a href="#three">Three</a>
    </li>
</ul>
<div class="wrapper">
    <div id="one" class="content">
        <div class="box"></div>
    </div>
    <div id="two" class="content">
        <div class="box"></div>
    </div>
    <div id="three" class="content">
        <div class="box"></div>
    </div>
</div>

CSS

.wrapper {
    position: relative;
}
.content {
    width: 300px;
    height: 300px;
    padding: 0;
    left: 0;
    top: 0;
}
.box {
    width: 300px;
    height: 300px;
}
#one .box {
    background: red;
}
#two .box {
    background: blue;
}
#three .box {
    background: green;
}
ul li {
    display: inline;
    padding-right: 10px;
    list-style: none;
}

JavaScript

$(function () {

    // get the width of the first content box
    // add a bit of extra so we end up with "-350px"
    var contentWidth = '-' + ($('.content').width() + 50) + 'px';
    
    // reposition the content here in case javascript is disabled
    $('.content').css({
        position: 'absolute',
        left: contentWidth
    });
    
    $("li a").click(function () {
        event.preventDefault();
        var $blockID = $( $(this).attr('href') );
        // if the content is already showing, don't do anything
        if ($blockID.hasClass('visible')) { return; }
        // hide any visible content
        $('.content.visible')
            .removeClass('visible')
            // move the old content past the current window width, then reset it's position
            .animate({
                left: $(window).width()
            }, function () {
                // Remove left setting after the animation completes
                $(this).css('left', contentWidth);
            });
        $blockID
            .addClass('visible')
            .animate({ left: 0 });
    });

});