Pausing slider after click Jquery -
i have been trying create slider pauses on hover , resets on mouse leave. part works. issue slider not pausing after next, previous button or dots (small screen) clicked ( please hover on slideshow see arrows(large screen)).
slideshow needs remain in pause state once clicked until user no longer hovering slideshow - reset timeout , carry on loop.
i believe issue somewhere in "auto slide" section slider works automatically imitating "click".
// set height slider. function retrieve_height() { var img_height = $(".top-slides li img").outerheight(); $(".top-slides").css("height", img_height); } $(window).load(retrieve_height); $(window).resize(retrieve_height); $(document).ready(function() { function content_slider() { var slide_progress = $(".progress-bar"), // class progress bar indicates duration of slide slide_duration = 5000, // set duration of 1 slide. 5000 = 5 seconds. progress_timer = settimeout(animate_progress, slide_duration); // needed reset progress bar // autoplay function animate_progress() { $(slide_progress).animate({ width: "100%", opacity: 1 }, slide_duration); } animate_progress(); // reset progress bar function reset_progress() { $(slide_progress).stop(); $(slide_progress).css("width", "0"); // resets width progress bar $(slide_progress).css("opacity", "0.2"); // resets opacity transition cleartimeout(progress_timer); animate_progress(); } //check description height function check_description() { var descr_height = $(".slide-descriptions .slide-visible").outerheight() + 20; $(".slide-descriptions").css("height", descr_height); } check_description(); $(window).resize(check_description); function slide(target) { $("#slider-dots li").removeclass("active").eq(target).addclass("active"); $(".top-slides li").removeclass("slide-visible").eq(target).addclass("slide-visible"); $(".slide-descriptions li").removeclass("slide-visible").eq(target).addclass("slide-visible"); reset_progress(); check_description(); } $("#slider-dots li").click(function() { var target = $(this).index(); slide(target); //stopped auto slide when user clicked cleartimeout(timer); //then started auto slide again timer = settimeout(function() { $('#next').trigger('click'); }, slide_duration); }); $("#next").click(function() { var target = $("#slider-dots li.active").index(); if (target === $("#slider-dots li").length - 1) { target = -1; } target = target + 1; slide(target); //stopped auto slide when user clicked cleartimeout(timer); //then started auto slide again timer = settimeout(function() { $('#next').trigger('click'); }, slide_duration); }); $("#prev").click(function() { var target = $("#slider-dots li.active").index(); if (target === 0) { target = $("#slider-dots li").length; } target = target - 1; slide(target); //stopped auto slide when user clicked cleartimeout(timer); //then started auto slide again timer = settimeout(function() { $('#next').trigger('click'); }, slide_duration); }); //auto slide var timer = null; timer = settimeout(function() { $('#next').trigger('click'); }, slide_duration); //stop slider if hovered $(".top-slider").mouseenter(function() { cleartimeout(timer); $(slide_progress).stop(); }); //restart slider when not hoverd $(".top-slider").mouseleave(function() { timer = settimeout(function() { $('#next').trigger('click'); }, slide_duration); reset_progress(); }); } // end content_slider content_slider(); }); //doc ready@import url('https://fonts.googleapis.com/css?family=lato:300,400,700'); html { font-size: 62.5%; } /* general ===========*/ .top-slider { position: relative; background: #333; max-width: 999px; margin: 0 auto; } .top-slides::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 2; } .img-slider { position: relative; } /* progress bar =================*/ .progress-bar { position: absolute; top: 0; left: 0; background: #fff; z-index: 4; height: 5px; } /* top slides (images) ==============*/ .top-slides { position: relative; height: 100%; margin: 0; padding: 0; } .top-slides li { position: absolute; top: 0; left: 0; opacity: 0; transition: ease 0.5s opacity; } .top-slides li.slide-visible { opacity: 1; } .top-slides li img { max-width: 100%; } /* slide descriptions ======================*/ .slide-descriptions { position: absolute; bottom: 20%; width: 100%; z-index: 5; color: #fff; font-family: 'lato', sans-serif; font-size: 2.2rem; line-height: 1.4; font-weight: 300; } .slide-descriptions li { position: absolute; left: 0; top: 0; opacity: 0; transition: ease 0.5s opacity; box-sizing: border-box; padding: 0 120px; } .slide-descriptions li.slide-visible { opacity: 1; } .slide-descriptions span:first-child { font-size: 6rem; margin-bottom: 22px; line-height: 1; color: #fff; font-weight: 400; max-width: 680px; height: 65px; overflow: hidden; display: block; } .slide-description span:last-child { height: 155px; overflow: hidden; } /* arrow controls ===================*/ #buttons { display: none; } .top-slider:focus #buttons, .top-slider:hover #buttons { display: block; } #buttons li { position: absolute; width: 66px; height: 66px; text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 6.6rem; top: 50%; transition: ease 0.2s background; z-index: 200; border-radius: 100%; text-shadow: -1px 0px 2px rgba(150, 150, 150, 1); cursor: pointer; transition: ease 0.2s opacity; } #buttons li .screen-reader { position: absolute; top: 0; left: 0; height: 0; width: 0; overflow: hidden; } #buttons .button:focus, #buttons .button:hover { color: rgba(255, 255, 255, 1); } #buttons .btn-prev { left: 30px; -webkit-transform: translatey(-50%); transform: translatey(-50%); } #buttons .btn-next { right: 30px; -webkit-transform: translatey(-50%) rotate(180deg); transform: translatey(-50%) rotate(180deg); } /* slider dots ===============*/ #slider-dots { position: absolute; bottom: 10px; z-index: 5; right: 50%; -webkit-transform: translatex(50%); transform: translatex(50%); display: none; } #slider-dots li { font-size: 5rem; color: rgba(255, 255, 255, 0.5); display: inline; cursor: pointer; } #slider-dots li.active { color: rgba(255, 255, 255, 1); } @media (max-width: 980px) { #buttons { display: none!important; } #slider-dots { display: block; } .slide-descriptions { position: relative; } .slide-descriptions li { padding: 10px 20px; } .slide-descriptions li span:first-child { font-size: 2.5rem; height: auto; margin-bottom: 10px; max-width: 100%; line-height: 1.2; } .slide-descriptions li span:last-child { font-size: 1.6rem; height: auto; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="top-slider"> <span class="progress-bar"> </span> <div class="img-slider"> <ul class="top-slides"> <li class="slide-visible"> <img src="http://www.funonsite.com/funarea/wallpapers/free_hd-wallpaper-girl-1920x1080.jpg" alt="#"> </li> <li> <img src="http://hit-interiors.com/wp-content/uploads/parser/sailboat-wallpaper-5.jpg" alt="#"> </li> <li> <img src="https://s-media-cache-ak0.pinimg.com/originals/73/00/65/73006503fb3692387ed7a04caab2d6eb.jpg" alt="#"> </li> <li> <img src="http://techmeetstravel.com/wp-content/uploads/2016/04/flying.jpg" alt="#"> </li> </ul> <ul id="slider-dots"> <li class="active">•</li> <li>•</li> <li>•</li> <li>•</li> </ul> <ul id="buttons"> <li id="next" class="button btn-next"> <span class="font-icon" aria-hidden="true">A</span> <span class="screen-reader">next</span> </li> <li id="prev" class="button btn-prev"> <span class="font-icon" aria-hidden="true">A</span> <span class="screen-reader">previous</span> </li> </ul> </div> <!-- /img-slider --> <ul class="slide-descriptions"> <li class="slide-visible"> <span>heading one</span> <span>text one.curabitur arcu erat, accumsan id imperdiet et, porttitor @ sem. sed porttitor lectus nibh.</span> </li> <li> <span>heading two</span> <span>text two.curabitur arcu erat, accumsan id imperdiet et, porttitor @ sem. sed porttitor lectus nibh.curabitur arcu erat, accumsan id imperdiet et, porttitor @ sem. sed porttitor lectus nibh.</span> </li> <li> <span>headingthree</span> <span>text three.</span> </li> <li> <span>heading four</span> <span>text four.curabitur arcu erat, accumsan id imperdiet et, porttitor @ sem. sed porttitor lectus nibh.curabitur arcu erat, accumsan id imperdiet et, porttitor @ sem. sed porttitor lectus nibh.curabitur arcu erat, accumsan id imperdiet et, porttitor @ sem. sed porttitor lectus nibh.</span> </li> </ul> </div>please help
Comments
Post a Comment