JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<ul id="photos">
    <li>
        <a href="http://www.flickr.com/photos/brockwhittaker/8500935165/" style="background-image:url(http://farm9.staticflickr.com/8233/8500935165_2835685f30.jpg)">Landscape 5</a>
    </li>
    <li>
        <a href="http://www.flickr.com/photos/31538238@N07/8412935103/" style="background-image:url(http://farm9.staticflickr.com/8507/8412935103_b1af667772_z.jpg)">Landscape 4</a>
    </li>
    <li>
        <a href="http://www.flickr.com/photos/zanthia/8461978995/" style="background-image:url(http://farm9.staticflickr.com/8388/8461978995_1a4a48ca14_c.jpg)">Landscape 3</a>
    </li>
    <li>
        <a href="http://www.flickr.com/photos/zanthia/8477608906/" style="background-image:url(http://farm9.staticflickr.com/8094/8477608906_a02f8d5774_z.jpg)">Landscape 1</a>
    </li>
</ul>

<a href="#" class="arrow previous"></a>
<a href="#" class="arrow next"></a>

CSS

#photos {
    margin:0 auto;
    padding-top:120px;
    width:450px;
    position:relative;
}
#photos li {
    position:absolute;
    width:450px;
    height:450px;
    overflow:hidden;
    background-color:#fff;
    box-shadow: 1px 1px 1px #ccc;
    z-index:10;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
}
#photos li a {
    position:absolute;
    top:6px;
    left:6px;
    right:6px;
    bottom:6px;
    background-size: cover;
    text-indent:-9999px;
    overflow:hidden;
}
/*----------------------------
	Previous / Next arrows
-----------------------------*/
 a.arrow {
    width:33px;
    height:33px;
    background:url('http://demo.tutorialzine.com/2013/02/animated-css3-photo-stack/assets/img/arrows.png') no-repeat;
    position:absolute;
    top:340px;
    opacity:0.9;
}
a.arrow:hover {
    opacity:1;
}
a.arrow.previous {
    left:50%;
    background-position:0 0;
    margin-left:-340px;
}
a.arrow.next {
    right:50%;
    background-position:-33px 0;
    margin-right:-340px;
}

@charset "UTF-8";body{-webkit-backface-visibility:hidden}.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s}@-webkit-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-moz-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@-o-keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;-moz-animation-name:flash;-o-animation-name:flash;animation-name:flash}@-webkit-keyframes...

JavaScript

$(function () {

    var exits = ['fadeOut', 'fadeOutDown', 'fadeOutUpBig', 'bounceOut', 'bounceOutDown', 'hinge',
        'bounceOutUp', 'bounceOutLeft', 'rotateOut', 'rotateOutUpLeft', 'lightSpeedOut', 'rollOut'];

    var entrances = ['fadeIn', 'fadeInDown', 'fadeInRight', 'bounceIn', 'bounceInRight', 'rotateIn',
        'rotateInDownLeft', 'lightSpeedIn', 'rollIn', 'bounceInDown'];

    var photos = $('#photos'),
        ignoreClicks = false;

    $('.arrow').click(function (e, simulated) {
        if (ignoreClicks) {

            // If clicks on the arrows should be ignored,
            // stop the event from triggering the rest 
            // of the handlers

            e.stopImmediatePropagation();
            return false;
        }

        // Otherwise allo this click to proceed,
        // but raise the ignoreClicks flag

        ignoreClicks = true;

        if (!simulated) {
            // Once the user clicks on the arrows,
            // stop the automatic slideshow
            clearInterval(slideshow);
        }
    });

    // Listen for clicks on the next arrow
    $('.arrow.next').click(function (e) {

        e.preventDefault();

        // The topmost element
        var elem = $('#photos li:last');

        // Apply a random exit animation
        elem.addClass('animated')
            .addClass(exits[Math.floor(exits.length * Math.random())]);

        setTimeout(function () {

            // Reset the classes
            elem.attr('class', '').prependTo(photos);

            // The animation is complate!
            // Allow clicks again:
            ignoreClicks = false;

        }, 1000);
    });

    // Listen for clicks on the previous arrow
    $('.arrow.previous').click(function (e) {

        e.preventDefault();

        // The bottom-most element
        var elem = $('#photos li:first');

        // Move the photo to the top, and 
        // apply a random entrance animation

        elem.appendTo(photos)
           ...