Revolver Slideshow with Touch
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 - 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">◀</button> <button type="button" class="control js_next">▶</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);
Developer | Daniel Gooß |
Username | daniel_gooss |
Uploaded | November 10, 2022 |
Rating | 4 |
Size | 7,609 Kb |
Views | 18,216 |
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!
Name | Size |
Navigation concept | 14,510 Kb |
Web Component Switches | 4,335 Kb |
IPhone Ui | 8,602 Kb |
Mobile Navigation Pattern | 5,939 Kb |
CSSConf EU | 4,125 Kb |
CSS Tab-Nav | 3,698 Kb |
SVG Cheat-Sheet | 3,107 Kb |
Blog Concept | 7,663 Kb |
Patternplate logo animation | 4,795 Kb |
Apple menu redesign | 25,821 Kb |
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!
Name | Username | Size |
My three.js practice | Esambino | 3,203 Kb |
CSS Grid Overlay | Cliffpyles | 3,090 Kb |
Adding Items | Valhead | 4,008 Kb |
Blog demo to use given styling | Andygirl | 2,412 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
CSS Link Zoom On Click | Bryce | 1,960 Kb |
Filtering with shuffle.js | Deyand | 2,712 Kb |
CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
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. Hide Your IP Now!