JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div id="slideShowContainer">
    <div id="slideShow">
        <ul>
            <li>
                <img src="http://lorempixel.com/1200/800/nature/1" width="100%" alt="Fish" />
            </li>
            <li>
                <img src="http://lorempixel.com/1200/800/nature/2" width="100%" alt="Ancient" />
            </li>
            <li>
                <img src="http://lorempixel.com/1200/800/nature/3" width="100%" alt="Industry" />
            </li>
            <li>
                <img src="http://lorempixel.com/1200/800/nature/4" width="100%" alt="Rain" />
            </li>
        </ul>
    </div> 
    <a id="previousLink" href="#">&raquo;</a>
     <a id="nextLink" href="#">&laquo;</a>

</div>
<p class="note"><a href="http://tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/">Read and Download on Tutorialzine</a>

</p>
<a id="previousLink" href="#">&raquo;</a>
 <a id="nextLink" href="#">&laquo;</a>

<p class="note credit">Photos by: <a href="http://www.flickr.com/photos/ac_theart/3835955225/in/photostream/">Andrea Costa</a>  <a href="http://www.flickr.com/photos/spoogman/5010809677/in/photostream/">Bill Owens</a>  <a href="http://www.flickr.com/photos/jbgoblin/4160580726/in/photostream/">John Bennett</a>  <a href="http://www.flickr.com/photos/ciadefoto/3196303515/in/pool-1115578@N22/">CIA DE FOTO</a>

</p>

CSS

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
/* Styling the slideshow */
 #slideShowContainer {
     background: pink;
     overflow: auto;
}
#slideShow {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position:absolute;
    background-color:#fff;
    z-index:100;
    -moz-box-shadow:0 0 10px #111;
    -webkit-box-shadow:0 0 10px #111;
    box-shadow:0 0 10px #111;
    z-index: 1;
}
#slideShow ul {
    list-style:none;
    overflow:hidden;
}
#slideShow li {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#slideShowContainer > a {
    border:none;
    text-decoration:none;
    text-indent:-99999px;
    overflow:hidden;
    width:36px;
    height:37px;
    background: red;
    position:absolute;
    top:50%;
    margin-top:-21px;
    z-index: 999;
}
#nextLink {
    right: 0;
}

JavaScript

$(document).ready(function () {

    var slideShow = $('#slideShow'),
        ul = slideShow.find('ul'),
        li = ul.find('li'),
        cnt = li.length;

    // As the images are positioned absolutely, the last image will be shown on top.
    // This is why we force them in the correct order by assigning z-indexes:

    updateZindex();

    if ($.support.transform) {

        // Modern browsers with support for css3 transformations

        li.find('img').css('rotate', function (i) {
            // Rotating the images counterclockwise
            return (-90 * i) + 'deg';
        });

        // Binding a custom event. the direction and degrees parameters
        // are passed when the event is triggered later on in the code.

        slideShow.bind('rotateContainer', function (e, direction, degrees) {

            // Enlarging the slideshow and photo:

            slideShow.animate({
                width: 510,
                height: 510,
                marginTop: 0,
                marginLeft: 0
            }, 'fast', function () {

                if (direction == 'next') {

                    // Moving the topmost image containing Li at
                    // the bottom after a fadeOut animation

                    $('li:first').fadeOut('slow', function () {
                        $(this).remove().appendTo(ul).show();
                        updateZindex();
                    });
                } else {

                    // Showing the bottomost Li element on top 
                    // with a fade in animation. Notice that we are
                    // updating the z-indexes.

                    var liLast = $('li:last').hide().remove().prependTo(ul);
                    updateZindex();
                    liLast.fadeIn('slow');
                }

                // Rotating the slideShow. css('rotate') gives us the
                // current rotation in radians. We are converting it to
                // degress so we can add 90 or -90 to...