Revolver Slideshow

Developer
Daniel Gooß
Size
5,445 Kb
Views
26,312
  1. Revolver Slideshow Previews
  2. Revolver Slideshow HTML Codes
  3. Revolver Slideshow CSS Codes
  4. Revolver Slideshow JS Codes

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 Previews
IQ Test

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">&#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 - 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);
Revolver Slideshow - Script Codes
Revolver Slideshow - Script Codes
Home Page Home
Developer Daniel Gooß
Username daniel_gooss
Uploaded November 10, 2022
Rating 3
Size 5,445 Kb
Views 26,312
Do you need developer help for Revolver Slideshow?

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
Dashboard
IPhone Ui
Blog Concept
Mobile Navigation Pattern
CSS Blur Effect
Apple menu redesign
Base-Style
CSSConf EU
Patternplate logo animation
SVG Cheat-Sheet
Create amazing video scripts 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!