<section data-slideshow>
  <article data-slide data-theme=dark>
    <h1>HTML Slideshow</h1>
    <h2>Slideshow Built using HTML, CSS, and JS</h2>
    <p>Use <code>left</code> and <code>right</code> arrow keys to navigate, or use the buttons below</p>
  </article>
  <article data-slide>
    <h1>Default Slide</h1>
    <h2>Subheadline</h2>
    <p>Also try swiping on touchscreens&hellip;</p>
  </article>
  <article data-slide data-theme=dark>
    <h1>Dark Slide</h1>
    <h2>Subheadline</h2>
  </article>
  <article data-slide data-theme=code>
    <h1>Code Themed Slide</h1>
    <h2>Subheadline</h2>
  </article>
  <article data-slide data-theme=book>
    <h1>Book Themed Slide</h1>
    <h2>Subheadline</h2>
  </article>
  <nav>
    <input type=button data-button=outline value=&lt; onclick=move('prev') ontouchstart=move('prev')>
    <input type=button data-button=outline value=&gt; onclick=move('next') ontouchstart=move('next')>
  </nav>
</section>
html,body {
  margin: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
[data-slideshow] {
  margin: 0;
  padding: 0;
  position: relative;
}
[data-slide] {
  position: absolute;
  left: 100vmax;
  z-index: 50;
  transition: left .5s ease-in-out;
  overflow-y: scroll;
}
[data-slide]:first-of-type {
  left: 0;
}
[data-slideshow] nav {
  margin: 0;
  padding: 0;
  position: fixed;
  bottom: 1em;
  right: .75em;
  z-index: 100;
}
[data-slideshow] nav input {
  font-size: 18pt !important;
  margin: 0 .25em !important;
  width: auto !important;
  min-width: 2.25em;
  background: rgba(0,0,0,.5) !important;
  color: white !important;
  border: 1px solid currentColor !important;
  border-radius: 2px;
  text-shadow: rgba(0,0,0,.7) 1px 1px 0 !important;
  box-shadow: inset rgba(0,0,0,.15) 1px 1px 0;
  transition: color .1s ease-in-out;
}
[data-slideshow] nav input:focus,
[data-slideshow] nav input:hover {
  color: white !important;
  background: rgba(0,0,0,.7) !important;
}
[data-slideshow] nav input:active {
  color: #0cf !important;
  background: rgba(0,0,0,.7) !important;
}
[data-slide] h1 {
  margin: 10vmin 0 4vmin 0 !important;
  font-size: 12vmin !important;
}
[data-slide] h1 + h2 {
  margin-top: -4vmin !important;
  font-size: 5.5vmin !important;
}
[data-slide] p {
  margin: 0 auto;
  max-width: 80%;
  font-size: 6vmin;
  text-align: center;
}
@media (orientation: portrait) {
  [data-slideshow],
  [data-slide] {
    width: 100vmin;
    height: 100vmax;
  }
}
@media (orientation: landscape) {
  [data-slideshow],
  [data-slide] {
    width: 100vmax;
    height: 100vmin;
  }
}
var slideshow = document.querySelector('[data-slideshow]')
    slides = slideshow.querySelectorAll('[data-slide]')
for (j=0;j<slides.length;j++){
  slides[j].setAttribute('data-slide',j)
}
var count = 0
function move(direction){
  if (direction == 'prev'){
    if (document.querySelector('[data-slideshow] [data-slide="'+(count-1)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count-1)+'"]').style.left = '-100vw'
    }
    document.querySelector('[data-slideshow] [data-slide="'+count+'"]').style.left = '0'
    if (document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]').style.left = '100vw'
    }
    if (count-1 >= 0){
      count--
    }
  }
  if (direction == 'next'){
    document.querySelector('[data-slideshow] [data-slide="'+count+'"]').style.left = '-100vw'
    if (document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count+1)+'"]').style.left = '0'
    }
    if (document.querySelector('[data-slideshow] [data-slide="'+(count+2)+'"]')){
      document.querySelector('[data-slideshow] [data-slide="'+(count+2)+'"]').style.left = '100vw'
      count++
    }
  }
}
// Arrow keys to navigate
document.onkeyup = function(e){
  e.preventDefault()
  var charCode = e.which;
  charCode==37 && move('prev')
  charCode==39 && move('next')
}
// Swipe to Navigate
var gesture = {
      x: [],
      y: [],
      match: ''
    },
    tolerance = 100;
window.addEventListener('touchstart',function(e){
  e.preventDefault()
  for (var i=0; i<e.touches.length; i++){
    var dot = document.createElement('div');
    dot.id = i
    dot.style.top = e.touches[i].clientY-25+'px'
    dot.style.left = e.touches[i].clientX-25+'px'
    document.body.appendChild(dot)
    gesture.x.push(e.touches[i].clientX)
    gesture.y.push(e.touches[i].clientY)
  }
});
window.addEventListener('touchmove',function(e){
  for (var i=0; i<e.touches.length; i++) {
    var dot = document.getElementById(i);
    dot.style.top = e.touches[i].clientY-25+'px'
    dot.style.left = e.touches[i].clientX-25+'px'
    gesture.x.push(e.touches[i].clientX)
    gesture.y.push(e.touches[i].clientY)
  }
});
window.addEventListener('touchend',function(e){
  var dots = document.querySelectorAll('div'),
      xTravel = gesture.x[gesture.x.length-1] - gesture.x[0],
      yTravel = gesture.y[gesture.y.length-1] - gesture.y[0];
  if (yTravel<tolerance && yTravel>-tolerance && xTravel<-tolerance){
    move('next')
  }
  if (yTravel<tolerance && yTravel>-tolerance && xTravel>tolerance){
    move('prev')
  }
  gesture.x = []
  gesture.y = []
  gesture.match = xTravel = yTravel = ''
  for (i=0;i<dots.length;i++){
    dots[i].id = ''
    dots[i].style.opacity = 0
    setTimeout(function(){
      document.body.removeChild(dots[i])
    },1000)
  }
})

External CSS

  1. //fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700,300italic,400italic,500italic,700italic
  2. //fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic
  3. //s3-us-west-2.amazonaws.com/s.cdpn.io/67439/basic.css
  4. //staticresource.s3.amazonaws.com/data-buttons.css
  5. //fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900
  6. //fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic
  7. //fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic
  8. //staticresource.s3.amazonaws.com/basic.css

External JavaScript

This Pen doesn't use any external JavaScript resources.