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 |
IPhone Ui | 8,602 Kb |
Blog Concept | 7,663 Kb |
Revolver Slideshow | 5,445 Kb |
Text Transition Effect | 232,607 Kb |
Folded Video | 3,913 Kb |
WebGL Container | 2,300 Kb |
CSS Blur Effect | 3,176 Kb |
IPhone Ui - Content only | 6,499 Kb |
SVG Cheat-Sheet | 3,107 Kb |
Mobile Navigation Pattern | 5,939 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 |
Practice using Wixel | Emnk | 3,057 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Vue.js | Thommyboy02 | 1,506 Kb |
Sass random color animation | Jotavejv | 4,827 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Contact | GanNichiHa | 2,514 Kb |
Mini Profile | Frytyler | 3,828 Kb |
Rain Landing in a Pond | Edball | 3,009 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Atom | Bhlaird | 1,932 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!