Paraglider examples

/*Downloaded from https://www.codeseek.co/pixelass/paraglider-examples-bRaVyg */
body {
  margin: 0;
  font-family: sans-serif;
  min-width: 320px;
  overflow-x: hidden;
  overflow-y: auto;
  background: #222;
  color: #fff;
}

main {
  margin: auto;
}

a {
  color: #fff;
  font-weight: bolder
}

a:hover {
  color: #f00;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}


:root { /* stylelint-disable-line plugin/no-unsupported-browser-features */
}

.glider {
  position: relative;
  width: 100vw;
  height: 66.66667vw;
  max-width: 750px;
  max-height: 500px;
  margin: auto;
  background: var(--theme-bg);
  color: var(--theme-color);
}

.slides {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  top: 0;
  right:100%;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  background-size: auto 100%
}

.slide.current {
  left: 0;
  right: 0;
  z-index: 1;
}

.slide.previous {
  left: 0;
  right: 100%;
  background-position: 0 0;
  z-index: 2;
}

.slide.next {
  right: 0;
  left: 100%;
  background-position: 100% 0;
  z-index: 2;
}

.pagers {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
  z-index: 2
}

.pagers .previousButton,
  .pagers .nextButton {
  position: absolute;
  top: 50%;
  width: 1em;
  height: 2em;
  font-size: 32px;
  font-size: 2rem;
  margin: 0 16px;
  margin: 0 1rem;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: rgba(255, 255, 255, .5);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: visible;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.pagers .previousButton:hover, .pagers .nextButton:hover {
  background: rgba(255, 255, 255, .9);
}

.pagers .previousButton {
  left: 0;
}

.pagers .nextButton {
  right: 0;
}

.dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  z-index: 2;
  visibility: hidden;
}

.dot {
  position: relative;
  height: 48px;
  height: 3rem;
  width: 48px;
  width: 3rem;
  font-size: 16px;
  font-size: 1rem;
  margin: 4px;
  margin: 0.25rem;
  visibility: visible;
  border-radius: 50%;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center
}

.dot::before {
  content: '';
  display: block;
  height: 1em;
  width: 1em;
  border-radius: inherit;
  background: rgba(255, 255, 255, .5);
}

.dot:hover {
  background: rgba(0, 0, 0, .3);
}

.dot.active::before {
  content: '';
  background: rgba(255, 255, 255, .9);
}

.pluginLoaded {
  /* plugin loaded */
}

.init {
  /* plugin initialized */
}

.slides {
  /* slides */
}

.slide {
  /* slide */
}

.dot {
  /* dot */
}

.nextButton {
  /* next */
}

.previousButton {
  /* prev */
}

.parallax {
  /* parallax */
}

/*Downloaded from https://www.codeseek.co/pixelass/paraglider-examples-bRaVyg */
console.clear();
var wrapper = window.Paraglider.wrapper;

var styles = {
  pluginLoaded: 'pluginLoaded',
  slide: 'slide',
  slides: 'slides',
  init: 'init',
  current: 'current',
  previous: 'previous',
  next: 'next',
  dot: 'dot',
  active: 'active',
  nextButton: 'nextButton',
  prevButton: 'previousButton',
  glider: 'glider',
  cube: 'cube',
  cubes: 'cubes'
};
var classNames = styles;
var parallaxSlider = function parallaxSlider(glider, handlePrev, handleNext) {

  return wrapper(glider, {
    classNames: classNames,
    speed: 1000,
    spring: 500,
    onSlide: function onSlide(progress, _ref, slides) {
      var next = _ref.next,
          previous = _ref.previous,
          current = _ref.current,
          rest = _ref.rest;

      if (previous !== null) {
        slides.forEach(function (slide) {
          slide.style.zIndex = 0;
          slide.style.right = 0;
          slide.style.left = 0;
        });
        slides[current].style.zIndex = 3;
        slides[previous].style.zIndex = 4;
        slides[previous].style.backgroundPosition = ' 0 0';
        slides[previous].style.right = 100 - 100 * progress + '%';
      } else if (next !== null) {
        slides.forEach(function (slide) {
          slide.style.zIndex = '';
          slide.style.right = '';
          slide.style.left = '';
        });
        slides[current].style.zIndex = 3;
        slides[next].style.zIndex = 4;
        slides[next].style.backgroundPosition = ' 100% 0';
        slides[next].style.left = 100 - 100 * progress + '%';
      }
    },
    onEnd: function onEnd(_ref2, slides) {
      var current = _ref2.current;

      slides.forEach(function (slide) {
        slide.style.transform = '';
        slide.style.zIndex = '';
        slide.style.right = '';
        slide.style.left = '';
      });
    }
  });
};

parallaxSlider(document.querySelector('.' + styles.glider));