Revolver Slideshow
How do I make an 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 10 November 2022, Thursday.
Revolver Slideshow - Script Codes 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">◀</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='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Revolver Slideshow - Script Codes 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 - Script Codes 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);
Developer | Daniel Gooß |
Username | daniel_gooss |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 5,445 Kb |
Views | 26,312 |
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 |
CSS Blur Effect | 3,176 Kb |
Dashboard | 25,043 Kb |
CSS Tab-Nav | 3,698 Kb |
Revolver Slideshow | 5,445 Kb |
Revolver Slideshow with Touch | 7,609 Kb |
Apple menu redesign | 25,821 Kb |
Navigation concept | 14,510 Kb |
WebGL Container | 2,300 Kb |
IPhone Ui - Content only | 6,499 Kb |
Patternplate logo animation | 4,795 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 |
A Pen by Bryan Rojas | Bryanrojas | 1,873 Kb |
Force Counter | Kenlauguico | 2,732 Kb |
Particle Motion trajectories | Sniejadlik | 5,899 Kb |
HEXAGON | Aurumlux | 1,684 Kb |
Basic 3D Fullscreen Transition | Apetrov | 3,270 Kb |
Loading animation - freedom purchase | Rocbear | 2,567 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
A form arranged using automatic placement. | Vikasford | 2,103 Kb |
OnScreenAction | Ozgursagiroglu | 2,647 Kb |
A Pen by Alex Edwards | Exards | 8,218 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!