Fade images slider click prev next button
Question
I'm making an image slider that has thumbnails and a previous and next button. When you click on a thumbnail that is different from the main image, I want it to fade into the new one. Same goes for the previous and next buttons.
I have a fade web-kit animation in place, but it's not working. Here's the codepen .
$('#imgDetail li img').click(function(){ $('#unidoor').attr('src',$(this).attr('src')); }); $('#next').on('click',function(){ var imgSrc = $('#unidoor').attr('src'); var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').next().find('img').attr('src'); console.log(nextSrc); nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:first').attr('src')): $('#unidoor').attr('src',nextSrc); }); $('#prev').on('click',function(){ var imgSrc = $('#unidoor').attr('src'); var nextSrc = $('ul img[src="'+imgSrc+'"]').closest('li').prev().find('img').attr('src'); console.log(nextSrc); nextSrc ==undefined?$('#unidoor').attr('src',$('ul img:last').attr('src')): $('#unidoor').attr('src',nextSrc); });
* { margin: 0; padding: 0; } body{ margin: 0; padding:0; font-size: 100%; /* line-height: 1.6; */ /* font-family: Arial, Helvetica, sans-serif; */ } .header{ margin: 0 auto; width: 100%; background-color: #333; padding: 30px 0 0 0; } .header h1{ margin: 0; text-align: center; color: white; font-family: Arial, Helvetica, sans-serif; } .header ul { list-style-type: none; margin: 0; /* padding: 0; */ overflow: hidden; padding: 20px 0px 30px 0; text-align: center; } .header li { display: block; display: inline-block; /* border-right: 1px solid #bbb; */ border-right: 1px solid #bbb; height: 25px; } .header li:last-child{ border-right: none; } .header li a { display: block; color: white; text-align: center; text-decoration: none; padding: 0px 40px; font-size: 1em; } .header li a:hover{ color: #7bbe9a; /* color: #80b198; */ } #green-room { background: #333 !important; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } #unidoor { /* position: relative; */ width: 90%; margin: 0 auto; display: block; } #prev { position: absolute; float: left; bottom: 55%; left: 5%; cursor: pointer; font-weight: bold; } #next { position: absolute; float: right; bottom: 55%; right: 5%; cursor: pointer; font-weight: bold; width: auto; } .previous { background-color: #fff; opacity: 0.5; color: black; width: auto; } .next { background-color: #fff; opacity: 0.5; color: black; } #imgDetail a { text-decoration: none; display: inline-block; padding: 8px 16px; } #imgDetail a:hover { background-color: #7bbe9a; color: white; opacity: 1; } #imgDetail ul { margin: 0 auto; display: block; width: 50%; } /* fade animation */ #fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } .thumb { width: 25%; height: auto; margin: 15px 5px 0 5px; } #imgDetail li { display: inline; margin-right: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Daniel Pollack</title> <link rel="stylesheet" type="text/css" href="css/styles.css"/> </head> <body id="green-room"> <div class="header"> <div id="title"><h1>Lorem Ipsum 3D Online Portfolio</h1></div> <nav id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="index.html#portfolio">Portfolio</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> <div class="slideshow-container"> <div id="imgDetail"> <br> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" alt="" id="unidoor" /> <a href="#" id="prev" class="prev-next-button previous">‹</a> <a href="#" id="next" class="prev-next-button next">›</a> <ul> <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" id="fade" class="thumb" /></li> <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" id="fade" class="thumb" /></li> <li><img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" id="fade" class="thumb" /></li> </ul> </div> </div> <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script> <script> window.sr = ScrollReveal({reset: true}); sr.reveal('#unidoor'); </script> </body> </html>
1 answers
solution1
0 ACCPTED 2017-09-27 02:04:14
In your approach you need to perform some code, I made some changes in your code you can see it in the code example.
First, you need to create the thumbnail based on the images that you need to slide.
Second, you shouldn't set the src property of each image to the next src (image URL), because each time you do that you are downloading the images, you should keep all images in cache and download them once.
Third, you should listen the onclick event for arrow previous and next in just one function, maybe it will be better separate them into two function to assign the single responsability for next and previous buttons.
Fourth, you should use only css class to make the fade effect for each slide, is less complex thant animations, in the demo code I created the active class to make it work as a fade effect
I hope you can find it helpful.
$(document).ready(function(){ // get all images loaded var images = $(".unidoor-class"); // thumbnails containers var thumbnailContainer = $("#thumbnails"); // generate thumbnail images generateThumbnails(images, thumbnailContainer); // listeners for controls arrows $(".prev-next-button").on("click", function() { // get the images var currentImageIndex = $(".unidoor-class.active").index(); var isPrevious = $(this).hasClass("previous"); var nextIndex; if (isPrevious) { if (currentImageIndex === 0) { nextIndex = images.length - 1; } if (currentImageIndex > 0) { nextIndex = currentImageIndex - 1; } } else { if (currentImageIndex === images.length - 1) { nextIndex = 0; } if (currentImageIndex < images.length - 1) { nextIndex = currentImageIndex + 1; } } // remove any active class from images images.removeClass("active"); // get the next active image and add active class to that next current image $(images[nextIndex]).addClass("active"); }); $(".thumb").on("click", function(event){ event.preventDefault(); var indexSelected = $(this).data("img-index"); var currentShown = $(".unidoor-class.active").index(); if (currentShown === indexSelected) return false; images.removeClass("active"); $(images[indexSelected]).addClass('active'); }); function generateThumbnails(images, container) { var ul = $("<ul>"); images.each(function(index, element){ var currentThumb = $("<img>"); var li = $("<li>"); var src = $(this).attr("src"); currentThumb.attr("src", src); currentThumb.attr("class", "thumb"); currentThumb.data("img-index", index); li.append(currentThumb); ul.append(li); }); container.append(ul); } });
* { margin: 0; padding: 0; } body{ margin: 0; padding:0; font-size: 100%; /* line-height: 1.6; */ /* font-family: Arial, Helvetica, sans-serif; */ } .header{ margin: 0 auto; width: 100%; background-color: #333; padding: 30px 0 0 0; } .header h1{ margin: 0; text-align: center; color: white; font-family: Arial, Helvetica, sans-serif; } .header ul { list-style-type: none; margin: 0; /* padding: 0; */ overflow: hidden; padding: 20px 0px 30px 0; text-align: center; } .header li { display: block; display: inline-block; /* border-right: 1px solid #bbb; */ border-right: 1px solid #bbb; height: 25px; } .header li:last-child{ border-right: none; } .header li a { display: block; color: white; text-align: center; text-decoration: none; padding: 0px 40px; font-size: 1em; } .header li a:hover{ color: #7bbe9a; /* color: #80b198; */ } #green-room { background: #333 !important; } .slideshow-container { max-width: 1000px; position: relative; margin: auto; } #unidoor, .unidoor-class { position: absolute; width: 100%; margin: 0 auto; display: block; top: 0; left: 0; opacity: 0; transition: opacity .5s; } .unidoor-class.active { position: relative; opacity: 1; } #prev { position: absolute; float: left; bottom: 55%; left: 5%; cursor: pointer; font-weight: bold; } #next { position: absolute; float: right; bottom: 55%; right: 5%; cursor: pointer; font-weight: bold; width: auto; } .previous { background-color: #fff; opacity: 0.5; color: black; width: auto; } .next { background-color: #fff; opacity: 0.5; color: black; } #imgDetail { position: relative; width: 90%; margin: 0 auto; } #imgDetail a { text-decoration: none; display: inline-block; padding: 8px 16px; } #imgDetail a:hover { background-color: #7bbe9a; color: white; opacity: 1; } #imgDetail ul { margin: 0 auto; display: block; width: 50%; } /* fade animation */ #fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from {opacity: .4} to {opacity: 1} } @keyframes fade { from {opacity: .4} to {opacity: 1} } .thumb { width: 25%; height: auto; margin: 15px 5px 0 5px; } #imgDetail li { display: inline; margin-right: 10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="slideshow-container"> <div id="imgDetail"> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_1.jpg" class="unidoor-class active" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_2.jpg" class="unidoor-class" /> <img src="http://www.davidwightman.net/_images_landscape/Behemot/Behemot_detail_3.jpg" class="unidoor-class" /> <!--CONTROLS--> <a href="#" id="prev" class="prev-next-button previous">‹</a> <a href="#" id="next" class="prev-next-button next">›</a> <!--Thumbnails--> <div id="thumbnails"> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Elastic Slider Next/ Prev button
jQuery slider next prev button issue
vue custom slider, next and prev button
my jquery slider is running well but there is bug that it sometimes does'nt shows images on next or prev click
Slider manual control to allow prev/next button to click from last slide to first slide
next and prev button for different categories of images
Next and Prev button not work when click both
menu traversing on next and prev button click
change image by click prev/next button
Slider navigation - next prev
Related Tags