CodePen Embed - Responsive Vanilla JS Slideshow

.slideshow
  ul.slideshow__list
    li.slideshow__item(data-src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/rtj_deadpool.jpg')
      figure.slideshow__image(style='background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/rtj_deadpool.jpg);')
    li.slideshow__item(data-src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/rtj_howrad.jpg')
      figure.slideshow__image(style='background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/rtj_howrad.jpg);')
    li.slideshow__item(data-src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/2071504-the_punisher_v5_08___kitchen_irish_02___23.jpg')
      figure.slideshow__image(style='background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/2071504-the_punisher_v5_08___kitchen_irish_02___23.jpg);')
    li.slideshow__item(data-src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/deadpool.jpg')
      figure.slideshow__image(style='background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/22914/deadpool.jpg);')
  .slideshow__nav.slideshow__nav--next.
    <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M17.17 32.92l9.17-9.17-9.17-9.17 2.83-2.83 12 12-12 12z"/></svg>
  .slideshow__nav.slideshow__nav--prev.
    <svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M30.83 32.67l-9.17-9.17 9.17-9.17-2.83-2.83-12 12 12 12z"/></svg>

View Compiled

@import 'breakpoint';

* {
  box-sizing: border-box;
}

$desktop: 800px;

html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.slideshow {
  
  & {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  
  &__list {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    font-size: 0;
    height: 100%;
    transition: all .6s cubic-bezier(0.360, 0.245, 0.155, 0.990);
  }
  
  &__item {
    width: 100%;
    height: 100%;
    position: relative;
    display: inline-block;
  }
  
  &__image {
    margin: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
  }
  
  &__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    color: #fff;    
    font-size: 1.25em;
    cursor: pointer;
    background-color: #000;
    opacity: 0.5;
    
    &.is-inactive {
      opacity: 0.5;
      cursor: default;
    }
    
    &.is-active {
      opacity: 1;
    }
    
    svg {
      display: block;
    }
    
    &--next {
      right: 0;
    }
    
    &--prev {
      left: 0;
    }    
  }
  
  &__thumbs {
    position: absolute;
    bottom: 1em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: none;
    
    @include breakpoint($desktop) {
      display: block;
    }
  }
  
  &__thumbsItem {
    display: inline-block;
    width: 120px;
    height: 75px;
    background-size: cover;
    background-position: center;
    margin: 0 0.5em 0;
    border: 1px solid #fff;
    cursor: pointer;
    
    &.is-active {
      opacity: 0.5;
      cursor: default;
    }
  }
}

.dotNav {
  
  & {
    position: absolute;
    bottom: 1em;
    left: 50%;
    z-index: 20;
    transform: translateX(-50%);
    list-style: none;
    margin: 0;
    padding: 0;
    
    @include breakpoint($desktop) {
      display: none;
    }
  }
  
  &__item {
    display: inline-block;
    line-height: 1;
    width: 0.875em;
    height: 0.875em;
    border-radius: 0.875em;
    background-color: #fff;
    margin: 0 .5em;
    cursor: pointer;
    transition: opacity .3s ease;
    
    &.is-active {
      opacity: 0.5;
      cursor: default;
      scale: 0.9;
    }
  }
}

View Compiled

// Debounce
function debounce(a,b,c){var d;return function(){var e=this,f=arguments;clearTimeout(d),d=setTimeout(function(){d=null,c||a.apply(e,f)},b),c&&!d&&a.apply(e,f)}}

// Get siblings
var getSiblings = function (elem) {
  var siblings = [];
  var sibling = elem.parentNode.firstChild;
  for ( ; sibling; sibling = sibling.nextSibling ) {
      if ( sibling.nodeType === 1 && sibling !== elem ) {
          siblings.push( sibling );
      }
  }
  return siblings;
};

var Slideshow = function() {
  
  var 
    slideshow,
    slideList,
    slides,
    totalSlides,
    navNext,
    navPrev,
    clickCount,
    slideWidth,
    dots;
  
  var _init = function() {
    slideshow       = document.querySelector('.slideshow');
    slideList       = document.querySelector('.slideshow__list');
    navNext         = document.querySelector('.slideshow__nav--next');
    navPrev         = document.querySelector('.slideshow__nav--prev');
    slides          = document.querySelectorAll('.slideshow__item');
    slides          = Array.prototype.slice.call(slides);
    totalSlides     = slides.length;
    clickCount      = 0;
    
    _resize();
    _addEventHandlers();
    _setActiveNav();    
    _dotNav();
    _thumbNav();
    _setActiveDot(clickCount);    
    _setActivePagination(clickCount)
  }
  
  var _addEventHandlers = function() {
    navNext.addEventListener('click', _slideNext, false);
    navPrev.addEventListener('click', _slidePrev, false);
    window.addEventListener('resize', _resize, false);
  }
  
  var _dotNav = function() {
    var dotNav = document.createElement('ul');
    dotNav.classList.add('dotNav');
    slideshow.appendChild(dotNav);    
    slides.forEach(function(element, index) {
      _createDots(dotNav);
    });    
    _clickDots();
  }  
  
  var _createDots = function(dotNav) {
    var dot = document.createElement("li");
    dot.classList.add('dotNav__item');
    dotNav.appendChild(dot)
  }
  
  var _clickDots = function() {
    var dots = document.querySelectorAll('.dotNav__item');
    dots = Array.prototype.slice.call(dots);
    dots.forEach(function(element,index) {      
      element.addEventListener('click', _clickPagination.bind(null,element, index), false); 
    });
  }
  
  var _clickPagination = function(element, index) {  
    var siblings = getSiblings(element);
    siblings = Array.prototype.slice.call(siblings);    
    siblings.forEach(function(element) {
      element.classList.remove('is-active');      
    })  
    _setTransform(slideWidth, index);
    clickCount = index;
    if(clickCount === index) {
      element.classList.add('is-active');
    }
    _setActiveNav();
    _setActiveDot(index);
    _setActivePagination(index);
  }
  
  var _getDots = function() {
    var dots = document.querySelectorAll('.dotNav__item');
    dots = Array.prototype.slice.call(dots);    
    return dots;
  }
  
  var _setActiveDot = function(count) {
    var dots = _getDots();
    dots.forEach(function(element, index) {
      element.classList.remove('is-active');
      if(index === count) {
        element.classList.add('is-active');
      }
    })
  }
  
  var _setActiveNav = function() {
    if(clickCount === 0) {      
      navPrev.classList.add('is-inactive');
      navPrev.classList.remove('is-active');
      navNext.classList.add('is-active');
    } else {
      navPrev.classList.add('is-active');
    }
  }
  
  var _slideNext = function() {    
    clickCount++;    
    if(clickCount >= totalSlides) {
      clickCount = 0;
    }
    _setTransform(slideWidth, clickCount);
    _setActiveNav();
    _setActiveDot(clickCount);    
    _setActivePagination(clickCount);
  }
  
  var _slidePrev = function() {
    if(clickCount > 0 ) {
      clickCount--;      
      _setTransform(slideWidth, clickCount);
    }
    _setActiveNav();
    _setActiveDot(clickCount);
    _setActivePagination(clickCount);
  }
  
  var _thumbNav = function() {
    var thumbWrap = document.createElement('ul');
    thumbWrap.classList.add('slideshow__thumbs');
    slideshow.appendChild(thumbWrap);
    slides.forEach(function(element, index) {
      _createThumbs(element, thumbWrap);
    })
    _clickThumbs();
  }
  
  var _createThumbs = function(element, thumbWrap) {
    var thumbSrc = element.getAttribute('data-src');
    var thumb = document.createElement('li');
    thumb.classList.add('slideshow__thumbsItem')
    thumb.style.backgroundImage = 'url('+thumbSrc+')';
    thumbWrap.appendChild(thumb);      
  }
  
  var _clickThumbs = function() {
    var thumbs = document.querySelectorAll('.slideshow__thumbsItem');
    thumbs = Array.prototype.slice.call(thumbs);
    thumbs.forEach(function(element, index) {      
      element.addEventListener('click', _clickPagination.bind(null,element, index), false); 
    })
  }
  
  var _setActivePagination = function(count) {
    var thumbs = document.querySelectorAll('.slideshow__thumbsItem');
    thumbs = Array.prototype.slice.call(thumbs);
    thumbs.forEach(function(element, index) {
      element.classList.remove('is-active');
      if(index === count) {
        element.classList.add('is-active');
      }
    })    
  }
  
  var _setTransform = function(value, multiplier) {   
    var transformValue = value * multiplier;
    slideList.style['-webkit-transform'] = 'translateX(-'+transformValue+'px)';
		slideList.style['-moz-transform'] = 'translateX(-'+transformValue+'px)';
		slideList.style['-ms-transform'] = 'translateX(-'+transformValue+'px)';
		slideList.style['-o-transform'] = 'translateX(-'+transformValue+'px)';
		slideList.style['transform'] = 'translateX(-'+transformValue+'px)';
  }
  
  var _resize = debounce(function() {    
    slideWidth = slideshow.offsetWidth;
    _setTransform(slideWidth, clickCount);
  }, 50);
  
  return {
    init: _init
  }
}();

Slideshow.init();

This Pen is owned by Arden on CodePen.

See more by @aderaaij on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.