rgdonohue/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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).

  
## index.html
<!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="http://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="http://modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
    <!--[if lt IE 8]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <div id="wrapper">

    <div id="slide-container">
        <ul id="slides">
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
        </ul>
    </div>

    <button id="back">back</button>
    <button id="play">play</button>
    <button id="next">next</button>
    </div><!--end wrapper -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
          var startSlide = $("#slides li:first-child")
            currentSlide = startSlide,
            startPos = { 'left':'102%' },
            endPos = { 'left':'0px' },
            count = 1,
            totalSlides = 8,
            timer = null,
            playing = false;

        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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://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="http://modernizr.com/downloads/modernizr-latest.js"></script>
	</head>
	<body>
	<!--[if lt IE 8]>
	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
	<![endif]-->
	<div id="wrapper">

	<div id="slide-container">
	<ul id="slides">
	<li><span>1</span></li>
	<li><span>2</span></li>
	<li><span>3</span></li>
	<li><span>4</span></li>
	<li><span>5</span></li>
	<li><span>6</span></li>
	<li><span>7</span></li>
	<li><span>8</span></li>
	</ul>
	</div>

	<button id="back">back</button>
	<button id="play">play</button>
	<button id="next">next</button>
	</div><!--end wrapper -->

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
	var startSlide = $("#slides li:first-child")
	currentSlide = startSlide,
	startPos = { 'left':'102%' },
	endPos = { 'left':'0px' },
	count = 1,
	totalSlides = 8,
	timer = null,
	playing = false;

	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>