JSFiddle - React, Tailwind, and code Playground

by Extaze

HTML

<script src="https://raw.github.com/Extaze/fly.js/master/fly.js"></script>
<div class="slider">
    <div class="slider-contents">
        <div class="slider-contents-frame" style="height: 140px; width: 315px;">Content 1</div>
        <div class="slider-contents-frame" style="height: 140px; width: 315px;">Content 2</div>
        <div class="slider-contents-frame" style="height: 140px; width: 315px;">Content 3</div>
        <div class="slider-contents-frame" style="height: 140px; width: 315px;">Content 4</div>
    </div>
    <div class="slider-buttons"> <span class="slider-buttons-button slider-buttons-button-active"></span>

        <span class="slider-buttons-button"></span> <span class="slider-buttons-button"></span>
 <span class="slider-buttons-button"></span>

    </div>
</div>

CSS

.slider {
    height: 150px;
    width: 325px;
    border: 1px solid #AAA;
    float: left;
    background: #BBB;
    background: linear-gradient(top, rgba(204, 204, 204, 0.2), #AAA);
    background: -webkit-linear-gradient(top, rgba(204, 204, 204, 0.2), rgba(170, 170, 170, 0.2));
    background: -webkit-gradient(linear, left top, left bottom, color-stop(rgba(204, 204, 204, 0.2)), color-stop(rgba(170, 170, 170, 0.2)));
    background: -moz-linear-gradient(top, rgba(204, 204, 204, 0.2), rgba(170, 170, 170, 0.2));
    background: -o-linear-gradient(top, rgba(204, 204, 204, 0.2), rgba(170, 170, 170, 0.2));
    background: -ms-linear-gradient(top, rgba(204, 204, 204, 0.2), rgba(170, 170, 170, 0.2));
}
.slider-contents {
    height: 140px;
    width: 315px;
    overflow: hidden;
    margin: 4px auto;
    border: 1px dashed #CCC;
    background: transparent;
}
.slider-contents-frame {
    padding: 4px 10px 10px 4px;
    text-align: center;
    height: 135px;
}
.slider-buttons {
    height: 30px;
    width: 120px;
    margin: 10px auto;
}
.slider-buttons-button {
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
    border: 5px solid #444;
    width: 14px;
    height: 14px;
    cursor: pointer;
    float: left;
    margin: 5px auto 0 5px;
    z-index: 10;
    background: #DDD;
    background: linear-gradient(top, #DDD, #AAA);
    background: -webkit-linear-gradient(top, #DDD, #AAA);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(#DDD), color-stop(#AAA));
    background: -moz-linear-gradient(top, #DDD, #AAA);
    background: -o-linear-gradient(top, #DDD, #AAA);
    background: -ms-linear-gradient(top, #DDD, #AAA);
    -webkit-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), 0 2px 8px rgba(0, 0, 0,...

JavaScript

var slider = $$(".slider");
slider.children().at(1).children().bind("click", function () {
    if (!this.hasClass("slider-buttons-button-active")) {
        slider.children().at(0).children().at(0).Fx().animate({
            "margin-top": (-154 * this.index()) + ""
        }, {
            duration: 600,
            easing: "easeInOutCubic"
        });
        this.addClass("slider-buttons-button-active");
        this.brothers().removeClass("slider-buttons-button-active");
    }
});