Revolver Slideshow with Touch

Slideshow which uses element revolving in an array to achieve infinite behavior. This one is touch-enabled too! What is a revolver slideshow with touch How do you make a revolver slideshow with touch? This script and codes were developed by Daniel Gooß on 14 January 2022, Friday.

How do I make an revolver slideshow with touch?
  1. Revolver Slideshow with Touch Previews
  2. Revolver Slideshow with Touch HTML Codes
  3. Revolver Slideshow with Touch CSS Codes
  4. Revolver Slideshow with Touch JS Codes
Revolver Slideshow with Touch Previews

Revolver Slideshow with Touch HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Revolver Slideshow with Touch</title>
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>

<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/abeic.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald'>

      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}
.slide {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 0 -100%;
  vertical-align: top;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.75s ease;
}
.slide:first-child {
  z-index: 1;
  margin: 0;
}
.slide.active {
  z-index: 2;
  transform: translate3d(0, 0, 0);
}
.slide img {
  display: block;
  width: 100%;
}
body {
  padding: 5px 10px 0;
  background-color: #efefef;
  color: #333;
  text-align: center;
}
.slideshow {
  display: inline-block;
  width: 220px;
  text-align: center;
}
@media screen and (max-width: 450px) {
  .slideshow {
    width: 100%;
  }
}
.slider {
  box-sizing: border-box;
  margin: 0 0 10px;
  border: 10px solid #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.control {
  display: inline-block;
  padding: 10px;
  width: 30%;
  background-color: #fff;
  border: none;
  outline: none;
  line-height: 1;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <h1>Revolver Slideshow with Touch</h1>
<div class="slideshow js_slideshow">
  <ul class="slider js_slider">
    <li class="slide js_slide active el1">
      <img src="https://image.sinnerschrader.com/200x300/3079d0/fff/1" alt="" />
    </li>
    <li class="slide js_slide el2">
      <img src="https://image.sinnerschrader.com/200x300/333/fff/2" alt="" />
    </li>
    <li class="slide js_slide el3">
      <img src="https://image.sinnerschrader.com/200x300/3079d0/fff/3" alt="" />
    </li>
    <li class="slide js_slide el4">
      <img src="https://image.sinnerschrader.com/200x300/333/fff/4" alt="" />
    </li>
    <li class="slide js_slide el5">
      <img src="https://image.sinnerschrader.com/200x300/3079d0/fff/5" alt="" />
    </li>
    <li class="slide js_slide el6">
      <img src="https://image.sinnerschrader.com/200x300/333/fff/6" alt="" />
    </li>
  </ul>
  <button type="button" class="control js_prev">&#9664;</button>
  <button type="button" class="control js_next">&#9654;</button>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Revolver Slideshow with Touch CSS Codes

.slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}
.slide {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 0 -100%;
  vertical-align: top;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.75s ease;
}
.slide:first-child {
  z-index: 1;
  margin: 0;
}
.slide.active {
  z-index: 2;
  transform: translate3d(0, 0, 0);
}
.slide img {
  display: block;
  width: 100%;
}
body {
  padding: 5px 10px 0;
  background-color: #efefef;
  color: #333;
  text-align: center;
}
.slideshow {
  display: inline-block;
  width: 220px;
  text-align: center;
}
@media screen and (max-width: 450px) {
  .slideshow {
    width: 100%;
  }
}
.slider {
  box-sizing: border-box;
  margin: 0 0 10px;
  border: 10px solid #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
.control {
  display: inline-block;
  padding: 10px;
  width: 30%;
  background-color: #fff;
  border: none;
  outline: none;
  line-height: 1;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

Revolver Slideshow with Touch JS Codes

(function() {
  var CSSTRANSFORM, Slideshow, TRANSITION_END_EVENTS, TRANSITION_PREFIXED, slideshow,
    bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };

  CSSTRANSFORM = Modernizr.prefixed("transform");

  TRANSITION_PREFIXED = Modernizr.prefixed('transition');

  TRANSITION_END_EVENTS = {
    'WebkitTransition': 'webkitTransitionEnd',
    'MozTransition': 'transitionend',
    'OTransition': 'oTransitionEnd',
    'msTransition': 'MSTransitionEnd',
    'transition': 'transitionend'
  };

  Slideshow = (function() {
    function Slideshow($el, timer) {
      this.resize = bind(this.resize, this);
      this.clearAutoplay = bind(this.clearAutoplay, this);
      this.setAutoplay = bind(this.setAutoplay, this);
      this.navigate = bind(this.navigate, this);
      this.revolve = bind(this.revolve, this);
      this.snapToGrid = bind(this.snapToGrid, this);
      this.updateActiveSlides = bind(this.updateActiveSlides, this);
      this.loop = bind(this.loop, this);
      this.$slideshow = $el;
      this.$slider = this.$slideshow.find('.js_slider');
      this.$slides = this.$slider.find('.js_slide');
      this.slides = $.makeArray(this.$slides);
      this.width = this.$slider.width();
      this.isScrolling = false;
      this.isAnimating = false;
      this.startPos = [];
      this.deltaX = null;
      this.nextElIndex = null;
      this.prevElIndex = null;
      this.timerDuration = timer || null;
      this.timer = this.setAutoplay(this.timerDuration);
      this.transforms = [];
      this.loop();
      this.$slideshow.on(TRANSITION_END_EVENTS[TRANSITION_PREFIXED], (function(_this) {
        return function(e) {
          _this.isAnimating = false;
          if (e.target === _this.slides[_this.prevElIndex]) {
            e.target.style.transition = 'none';
            e.target.style[CSSTRANSFORM] = '';
            setTimeout(function() {
              return e.target.style.transition = '';
            }, 20);
          }
          if (!_this.timer) {
            _this.setAutoplay();
          }
        };
      })(this));
      this.$slideshow.on('click', '.js_next, .js_prev', (function(_this) {
        return function(e) {
          var offset;
          if (_this.isAnimating) {
            return;
          }
          _this.clearAutoplay(_this.timer);
          offset = $(e.target).hasClass('js_prev') ? -1 : 1;
          _this.navigate(offset);
        };
      })(this));
      $(window).on('resize', (function(_this) {
        return function(e) {
          return _this.resize();
        };
      })(this));
      this.$slider.on('touchstart', (function(_this) {
        return function(e) {
          var touch;
          _this.deltaX = null;
          touch = e.originalEvent.targetTouches[0];
          _this.startPos = [touch.clientX, touch.clientY];
        };
      })(this));
      this.$slider.on('touchmove', (function(_this) {
        return function(e) {
          var activeSlides, deltaPos, touch;
          touch = e.originalEvent.targetTouches[0];
          deltaPos = [touch.clientX - _this.startPos[0], touch.clientY - _this.startPos[1]];
          _this.deltaX = deltaPos[0];
          activeSlides = _this.updateActiveSlides();
          if (Math.abs(_this.deltaX) < Math.abs(deltaPos[1])) {
            _this.isScrolling = true;
            return;
          }
          if (Math.abs(_this.deltaX) > _this.width * 1.25) {
            return;
          }
          if (!_this.isDragging) {
            _this.isDragging = true;
            _this.isScrolling = false;
            _this.clearAutoplay(_this.timer);
            activeSlides.prev.style.transition = 'none';
            activeSlides.prev.style[CSSTRANSFORM] = 'translate3d(-100%,0,0)';
          }
          if (activeSlides) {
            _this.transforms.push({
              el: activeSlides.prev,
              prop: CSSTRANSFORM,
              style: 'translate3d(' + (-_this.width + _this.deltaX) + 'px,0,0)'
            });
            _this.transforms.push({
              el: activeSlides.current,
              prop: 'transition',
              style: 'none'
            });
            _this.transforms.push({
              el: activeSlides.current,
              prop: CSSTRANSFORM,
              style: 'translate3d(' + _this.deltaX + 'px,0,0)'
            });
            _this.transforms.push({
              el: activeSlides.next,
              prop: 'transition',
              style: 'none'
            });
            _this.transforms.push({
              el: activeSlides.next,
              prop: CSSTRANSFORM,
              style: 'translate3d(' + (_this.width - _this.deltaX / -1) + 'px,0,0)'
            });
          }
        };
      })(this));
      this.$slider.on('touchend', (function(_this) {
        return function(e) {
          var offset, touch;
          _this.isDragging = false;
          if (_this.isScrolling) {
            return;
          }
          touch = e.originalEvent.changedTouches[0];
          offset = _this.startPos[0] < touch.clientX ? -1 : 1;
          _this.snapToGrid(offset);
        };
      })(this));
    }

    Slideshow.prototype.loop = function() {
      return window.requestAnimationFrame((function(_this) {
        return function() {
          if (_this.isDragging) {
            $.each(_this.transforms, function(index, transform) {
              return transform.el.style[transform.prop] = transform.style;
            });
            _this.transforms = [];
          }
          return _this.loop();
        };
      })(this));
    };

    Slideshow.prototype.updateActiveSlides = function(offset) {
      var activeSlides;
      offset = offset || 1;
      this.nextElIndex = (this.slides.length + offset) % this.slides.length;
      this.prevElIndex = (this.slides.length + (offset / -1)) % this.slides.length;
      return activeSlides = {
        prev: this.slides[this.prevElIndex],
        current: this.slides[0],
        next: this.slides[this.nextElIndex]
      };
    };

    Slideshow.prototype.snapToGrid = function(offset) {
      var activeSlides;
      this.isAnimating = true;
      activeSlides = this.updateActiveSlides(offset);
      activeSlides.prev.style.transition = 'none';
      activeSlides.prev.style[CSSTRANSFORM] = 'translate3d(100%,0,0)';
      activeSlides.current.classList.remove('active');
      activeSlides.current.style.transition = '';
      activeSlides.current.style[CSSTRANSFORM] = 'translate3d(' + 100 * (offset / -1) + '%,0,0)';
      activeSlides.next.style.transition = '';
      activeSlides.next.style[CSSTRANSFORM] = '';
      activeSlides.next.classList.add('active');
      this.slides = this.revolve(this.slides, offset);
    };

    Slideshow.prototype.revolve = function(elements, offset) {
      if (offset < 0) {
        elements.unshift(elements.pop());
      } else {
        elements.push(elements.shift());
      }
      return elements;
    };

    Slideshow.prototype.navigate = function(offset) {
      var activeSlides;
      this.isAnimating = true;
      activeSlides = this.updateActiveSlides(offset);
      activeSlides.next.style.transition = 'none';
      activeSlides.next.style[CSSTRANSFORM] = 'translate3d(' + 100 * offset + '%,0,0)';
      setTimeout((function(_this) {
        return function() {
          return _this.snapToGrid(offset);
        };
      })(this), 20);
    };

    Slideshow.prototype.setAutoplay = function(timing) {
      if (!this.timerDuration) {
        return;
      }
      return this.timer = window.setInterval((function(_this) {
        return function() {
          _this.navigate(1);
        };
      })(this), this.timerDuration);
    };

    Slideshow.prototype.clearAutoplay = function(timer) {
      if (timer) {
        window.clearInterval(timer);
        this.timer = void 0;
      }
    };

    Slideshow.prototype.resize = function() {
      return this.width = this.$slider.width();
    };

    return Slideshow;

  })();

  slideshow = new Slideshow($('.js_slideshow'), 5000);

}).call(this);
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.