ryanve · September 8, 2015 05:10
diff --git a/slideshow.html b/slideshow.html
 <!DOCTYPE html>
 <title>.slideshow demo</title>
 <style>
  html { font: normal 1em/1.6 sans-serif; background: pink; }
  body { margin: 0; }
 </style>
 <style>
  .slideshow {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
    position: relative;
  }

  .slideshow__slide {
    position: relative;
    display: block;
    vertical-align: middle;
    background: whitesmoke;
    color: black;
    height: 100vh;
  }

  .slideshow__slide-content {
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    display: inline-block;
    margin: 0 auto;
  }

  .is-slideshow-grid .slideshow__slide-content {
    width: 100%;
    max-width: 800px;
  }

  .slideshow__actions {
    padding: 1.6rem 0;
    text-align: center;
    display: block;
    margin: 0 auto;
    border-top: 1px solid orangered;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .slideshow__slide {
    transition: height .2s ease-in-out;
    overflow: hidden;
  }

  .slideshow__slide:not(.is-active) {
    height: 0;
    pointer-events: none;
  }

  .is-active ~ .slideshow__slide:not(.is-active) {
  }

  .slideshow__next {
    cursor: pointer;
  }

  .slideshow__slide.is-active + .slideshow__actions .slideshow__next,
  .slideshow__slide:not(.is-active) + .slideshow__actions .slideshow__done {
    display: none;
  }
 </style>

 <div role="list" class="slideshow is-slideshow-y is-slideshow-grid">
    <div role="listitem" class="slideshow__slide">
        <div class="slideshow__slide-content">
            <h2>01</h2>
        </div>
    </div>
    <div role="listitem" class="slideshow__slide">
        <div class="slideshow__slide-content">
          <h2>02</h2>
        </div>
    </div>
    <div role="listitem" class="slideshow__slide">
        <div class="slideshow__slide-content">
          <h2>03</h2>
        </div>
    </div>
    <div role="listitem" class="slideshow__slide">
        <div class="slideshow__slide-content">
          <h2>04</h2>
        </div>
    </div>
    <div role="listitem" class="slideshow__slide">
        <div class="slideshow__slide-content">
          <h2>05</h2>
        </div>
    </div>
    <nav class="slideshow__actions">
      <a class="slideshow__next" role="button">next</a>
      <a class="slideshow__done" role="button">done</a>
    </nav>
 </div>

 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
 <script>
  $(function() {
    var $slides = $('.slideshow__slide');
    var $slideshow = $slides.closest('.slideshow');
    init();

    function init() {
      $slides.hasClass('is-active') || $slides.first().addClass('is-active');
    }

    function wheel(delta) {
      if (delta > 99) go(1);
      if (delta < -99) go(-1);
    }

    function go(n) {
      var $active = $slides.filter('.is-active');
      var curr = $slides.index($active);
      var hasActive = curr != -1;
      var next = hasActive ? curr + n : 0;
      if (next < 0) next = 0;
      else if (next >= $slides.length) next = -1;
      var $next = $slides.eq(next);
      if (hasActive) $active.not($next).removeClass('is-active');
      $next.addClass('is-active');
    }

    function isScroll(e, key) {
      if (key === 40 || key === 38) return e.scrollHeight > e.clientHeight;
      if (key === 39 || key === 37) return e.scrollWidth > e.clientWidth;
    }

    $(window).on('DOMMouseScroll mousewheel wheel', _.debounce(function(e) {
      wheel(e.originalEvent.deltaY);
    }, 200, {
      leading: true,
      trailing: false
    })).on('keydown', function(e) {
      var key = e.keyCode;
      if (key < 37 || key > 40) return;
      if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
      if (isScroll(document.documentElement, key)) return;
      e.preventDefault();
      if (key === 40 || key === 39) go(1);
      if (key === 38 || key === 37) go(-1);
    });

    $slideshow.find('.slideshow__next').on('click', function() {
      go(1);
    });
  });
 </script>
	<!DOCTYPE html>
	<title>.slideshow demo</title>
	<style>
	html { font: normal 1em/1.6 sans-serif; background: pink; }
	body { margin: 0; }
	</style>
	<style>
	.slideshow {
	text-align: center;
	margin: 0;
	padding: 0;
	list-style-type: none;
	overflow: hidden;
	max-width: 100vw;
	max-height: 100vh;
	position: relative;
	}

	.slideshow__slide {
	position: relative;
	display: block;
	vertical-align: middle;
	background: whitesmoke;
	color: black;
	height: 100vh;
	}

	.slideshow__slide-content {
	transform: translateY(-50%);
	top: 50%;
	position: absolute;
	left: 0;
	right: 0;
	display: inline-block;
	margin: 0 auto;
	}

	.is-slideshow-grid .slideshow__slide-content {
	width: 100%;
	max-width: 800px;
	}

	.slideshow__actions {
	padding: 1.6rem 0;
	text-align: center;
	display: block;
	margin: 0 auto;
	border-top: 1px solid orangered;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	}

	.slideshow__slide {
	transition: height .2s ease-in-out;
	overflow: hidden;
	}

	.slideshow__slide:not(.is-active) {
	height: 0;
	pointer-events: none;
	}

	.is-active ~ .slideshow__slide:not(.is-active) {
	}

	.slideshow__next {
	cursor: pointer;
	}

	.slideshow__slide.is-active + .slideshow__actions .slideshow__next,
	.slideshow__slide:not(.is-active) + .slideshow__actions .slideshow__done {
	display: none;
	}
	</style>

	<div role="list" class="slideshow is-slideshow-y is-slideshow-grid">
	<div role="listitem" class="slideshow__slide">
	<div class="slideshow__slide-content">
	<h2>01</h2>
	</div>
	</div>
	<div role="listitem" class="slideshow__slide">
	<div class="slideshow__slide-content">
	<h2>02</h2>
	</div>
	</div>
	<div role="listitem" class="slideshow__slide">
	<div class="slideshow__slide-content">
	<h2>03</h2>
	</div>
	</div>
	<div role="listitem" class="slideshow__slide">
	<div class="slideshow__slide-content">
	<h2>04</h2>
	</div>
	</div>
	<div role="listitem" class="slideshow__slide">
	<div class="slideshow__slide-content">
	<h2>05</h2>
	</div>
	</div>
	<nav class="slideshow__actions">
	<a class="slideshow__next" role="button">next</a>
	<a class="slideshow__done" role="button">done</a>
	</nav>
	</div>

	<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
	<script>
	$(function() {
	var $slides = $('.slideshow__slide');
	var $slideshow = $slides.closest('.slideshow');
	init();

	function init() {
	$slides.hasClass('is-active') \|\| $slides.first().addClass('is-active');
	}

	function wheel(delta) {
	if (delta > 99) go(1);
	if (delta < -99) go(-1);
	}

	function go(n) {
	var $active = $slides.filter('.is-active');
	var curr = $slides.index($active);
	var hasActive = curr != -1;
	var next = hasActive ? curr + n : 0;
	if (next < 0) next = 0;
	else if (next >= $slides.length) next = -1;
	var $next = $slides.eq(next);
	if (hasActive) $active.not($next).removeClass('is-active');
	$next.addClass('is-active');
	}

	function isScroll(e, key) {
	if (key === 40 \|\| key === 38) return e.scrollHeight > e.clientHeight;
	if (key === 39 \|\| key === 37) return e.scrollWidth > e.clientWidth;
	}

	$(window).on('DOMMouseScroll mousewheel wheel', _.debounce(function(e) {
	wheel(e.originalEvent.deltaY);
	}, 200, {
	leading: true,
	trailing: false
	})).on('keydown', function(e) {
	var key = e.keyCode;
	if (key < 37 \|\| key > 40) return;
	if (e.altKey \|\| e.ctrlKey \|\| e.metaKey \|\| e.shiftKey) return;
	if (isScroll(document.documentElement, key)) return;
	e.preventDefault();
	if (key === 40 \|\| key === 39) go(1);
	if (key === 38 \|\| key === 37) go(-1);
	});

	$slideshow.find('.slideshow__next').on('click', function() {
	go(1);
	});
	});
	</script>
No results found