Revolver Slideshow with Touch

Developer
Daniel Gooß
Size
7,609 Kb
Views
18,207
  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

How do I make an 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 10 November 2022, Thursday.

Revolver Slideshow with Touch Previews
IQ Test

Revolver Slideshow with Touch - Script Codes 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 - Script Codes 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 - Script Codes 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);
Revolver Slideshow with Touch - Script Codes
Revolver Slideshow with Touch - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 4
Size 7,609 Kb
Views 18,207
Do you need developer help for Revolver Slideshow with Touch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Daniel Gooß (daniel_gooss) Script Codes
Name
SVG Cheat-Sheet
Mobile Navigation Pattern
CSS Paperfold Effect
Dashboard
Base-Style
Web Component Switches
CSS Tab-Nav
CSSConf EU
IPhone Ui - Content only
Text Transition Effect
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!