simple JQuery slideshow

This demonstrates a simple slideshow using JQuery, specifically JQuery's animate method. The challenge here is to get the slides to continuously loop forward and in reverse. The layout in this example shows how this is done by first moving the subsequent or preceding slide into position before animating the transition. In an actual implementation, the slides to the right would be hidden from view (such as by setting the overflow property on the #slide-container element to hidden).

forked from rgdonohue's block: simple JQuery slideshow

<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>slideshow with JQuery/HTML5</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://necolas.github.io/normalize.css/2.1.3/normalize.css">
    <style>
         #wrapper {
            width: 960px;
            margin: 0 auto;
            padding: 10px 15px 80px;
        }
        #slide-container {
            width: 48%;
            height: 280px;
            background: #ccc;
            margin: 20px 0;
            position: relative;
            border-right: 2% solid white;
        }
        #slides {
            padding: 0;
            position: relative;
        }
        #slides li {
            width: 100%;
            height: 280px;
            background: #ddd;
            list-style-type: none;
            position: absolute;
            left: 102%;
            top: 0
            bottom: 0;
        }
        #slides li:first-child {
            left: 0;
        }
        #slides li span{
            position: absolute;
            top: 40%;
            left: 46%;
            font-size: 4em;
        }
        #slides li:nth-child(3n+1) {
            background: #468966;
        }
        #slides li:nth-child(3n+2) {
            background: #fff0a5;
        }
        #slides li:nth-child(3n+3) {
            background: #ffb038;
        }
    </style>
    <script src="https://modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
    
    <div id="wrapper">

function advance() {

if(count == totalSlides) {
                startSlide
                    .css('z-index','9').css(startPos)
                    .animate(endPos,400, function() {
                        startSlide.css('z-index','0').siblings().css(startPos);
                        currentSlide = startSlide;
                        count = 1;
                    });

} else {
                currentSlide = currentSlide.next(); 
                currentSlide.animate(endPos, 400, function(){ 
                    count++;
                }); 
            }

}
        function rewind() {

if(count == 1) {    
                currentSlide.css('z-index','9').siblings().css(endPos);
                currentSlide.animate(startPos,400, function() {
                    count = totalSlides;
                    currentSlide.css('z-index','0').css(endPos);
                    currentSlide = $('#slides li:last-child');
                });
                
            } else {
                currentSlide.animate(startPos, 400, function(){ 
                    currentSlide = currentSlide.prev(); 
                    count--;                 
                });
            }
        }

function playSlides() {
            function loop() {
                advance();
                timer = setTimeout(loop, 2000);
            }
            if(playing == false) {
                $('#play').html('stop');
                loop(); 
                playing = true;

} else {
                $('#play').html('play');
                clearTimeout(timer);
                timer = null;
                playing = false;
            }
        }
        $('#next').on('click', function() {
            advance();
        });
        $('#back').on('click', function() {
            rewind();
        });
        $('#play').on('click', function() {
            playSlides();
        })
    </script>
</body>
</html>

Modified http://modernizr.com/downloads/modernizr-latest.js to a secure url

https://modernizr.com/downloads/modernizr-latest.js

https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js