Revolver Slideshow

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

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

Revolver Slideshow HTML Codes

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

<meta name="viewport" content="width=device-width,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: 200px;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}
.slide {
  position: relative;
  display: inline-block;
  margin: 0 0 0 -100%;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.75s ease;
}
.slide:first-child {
  z-index: 1;
  margin: 0;
}
.slide.active {
  transform: translate3d(0, 0, 0);
}
.slide img {
  display: block;
}
body {
  padding: 5px 10px 0;
  background-color: #efefef;
  color: #333;
  text-align: center;
}
.slideshow {
  display: inline-block;
  text-align: center;
}
.slider {
  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</h1>
<div class="slideshow js_slideshow">
  <ul class="slider js_slider">
    <li class="slide js_slide active el1">
      <img src="http://image.sinnerschrader.com/200x300/3079d0/fff/1" alt="" />
    </li>
    <li class="slide js_slide el2">
      <img src="http://image.sinnerschrader.com/200x300/3079d0/fff/2" alt="" />
    </li>
    <li class="slide js_slide el3">
      <img src="http://image.sinnerschrader.com/200x300/3079d0/fff/3" alt="" />
    </li>
    <li class="slide js_slide el4">
      <img src="http://image.sinnerschrader.com/200x300/3079d0/fff/4" alt="" />
    </li>
    <li class="slide js_slide el5">
      <img src="http://image.sinnerschrader.com/200x300/3079d0/fff/5" 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='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script>

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

</body>
</html>

Revolver Slideshow CSS Codes

.slider {
  overflow: hidden;
  position: relative;
  width: 200px;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}
.slide {
  position: relative;
  display: inline-block;
  margin: 0 0 0 -100%;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.75s ease;
}
.slide:first-child {
  z-index: 1;
  margin: 0;
}
.slide.active {
  transform: translate3d(0, 0, 0);
}
.slide img {
  display: block;
}
body {
  padding: 5px 10px 0;
  background-color: #efefef;
  color: #333;
  text-align: center;
}
.slideshow {
  display: inline-block;
  text-align: center;
}
.slider {
  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 JS Codes

(function() {
  var $next, $prev, $slider, $slides, $slideshow, CSSTRANSFORM, TRANSITION_END_EVENTS, TRANSITION_PREFIXED, navigate, nextElIndex, prevElIndex, revolve, slides;

  CSSTRANSFORM = Modernizr.prefixed("transform");

  TRANSITION_PREFIXED = Modernizr.prefixed('transition');

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

  $slideshow = $(document).find('.js_slideshow');

  $slider = $slideshow.find('.js_slider');

  $slides = $slider.find('.js_slide');

  slides = $.makeArray($slides);

  $next = $slideshow.find('.js_next');

  $prev = $slideshow.find('.js_prev');

  nextElIndex = 1;

  prevElIndex = slides.length - 1;

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

  navigate = function(offset) {
    var currentSlide, nextSlide, prevSlide;
    nextElIndex = (slides.length + offset) % slides.length;
    prevElIndex = (slides.length + (offset / -1)) % slides.length;
    nextSlide = slides[nextElIndex];
    currentSlide = slides[0];
    prevSlide = slides[prevElIndex];
    nextSlide.style.transition = 'none';
    nextSlide.style[CSSTRANSFORM] = 'translate3d(' + 100 * offset + '%,0,0)';
    return setTimeout(function() {
      currentSlide.classList.remove('active');
      currentSlide.style[CSSTRANSFORM] = 'translate3d(' + 100 * (offset / -1) + '%,0,0)';
      nextSlide.style.transition = '';
      nextSlide.style[CSSTRANSFORM] = '';
      nextSlide.classList.add('active');
      return slides = revolve(slides, offset);
    }, 0);
  };

  $slideshow.on(TRANSITION_END_EVENTS[TRANSITION_PREFIXED], function(e) {
    if (e.target === slides[prevElIndex]) {
      e.target.style.transition = 'none';
      e.target.style[CSSTRANSFORM] = '';
      return setTimeout(function() {
        return e.target.style.transition = '';
      }, 0);
    }
  });

  $slideshow.on('click', '.js_next, .js_prev', function(e) {
    var nav;
    nav = $(e.target).hasClass('js_prev') ? -1 : 1;
    return navigate(nav);
  });

}).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.