javascript - jQuery Carousel not working on click -
i've been trying make carousel function website, can't seem work. uses jquery , supposed fade in , out photos within carousel, when click on next , previous buttons, nothing happens.
js:
$(window).ready(function() { $("#slide-next").click(function() { $(".carousel-item.visible").fadeout(); $(".carousel-item.visible").next().fadein("fast", function() { $(".carousel-item.visible").removeclass("visible"); $(this).addclass("visible"); }); }); $("#slide-prev").click(function() { $(".carousel-item.visible").fadeout(); $(".carousel-item.visible").prev().fadein("fast", function() { $(".carousel-item.visible").removeclass("visible"); $(this).addclass("visible"); }); }); }); html:
<div id='left_scroll'><i id="slide-prev" class="el el-chevron-left"></i> </div> <ul class="carousel-list"> <li class="carousel-item visible"> <img src='images/ral1.png' /> </li> <li style="display:none;" class="carousel-item"> <img src='images/ral2.png' /> </li> <li style="display:none;" class="carousel-item"> <img src='images/ral3.jpg' /> </li> <li style="display:none;" class="carousel-item"> <img src='images/ral4.jpg' /> </li> </ul> <div id='left_scroll'><i id="slide-next" class="el el-chevron-left"></i> </div> please remember new jquery.
it's because when you're on last element click next, there's no element find. , when on you're first element click previous there's no element find.
check out prev() demo
it show same experience having when you're on first element.
to fix it, add conditions if you're on first element clicked on prev should target last element.
$(window).ready(function() { $("#slide-next").click(function() { // instead of fadeout use `hide` instead hide $(".carousel-item.visible").hide(); var current = $(".carousel-item.visible"); // if last child clicking next if ( current.is( ".carousel-list li:last-child" ) ) { $(".carousel-item:first-child").fadein("fast", function() { $(".carousel-item.visible").removeclass("visible"); $(".carousel-item:first-child").addclass("visible"); }); } else { $(".carousel-item.visible").next().fadein("fast", function() { $(".carousel-item.visible").removeclass("visible"); $(this).addclass("visible"); }); } }); $("#slide-prev").click(function() { // instead of fadeout use `hide` instead hide $(".carousel-item.visible").hide(); var current = $(".carousel-item.visible"); // if you're on first element clicked on prev if ( current.is( ".carousel-list li:first-child" ) ) { $(".carousel-item:last-child").fadein("fast", function() { $(".carousel-item.visible").removeclass("visible"); $(".carousel-item:last-child").addclass("visible"); }); } else { $(".carousel-item.visible").prev().fadein("fast", function() { $(".carousel-item.visible").removeclass("visible"); $(this).addclass("visible"); }); } }); });ul { list-style: none; }<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='left_scroll'><i id="slide-prev" class="el el-chevron-left">prev</i></div> <ul class="carousel-list"> <li class="carousel-item visible"><img src='http://dummyimage.com/100x100/000/fff' /></li> <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/f20045/fff' /></li> <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/0044f0/fff' /></li> <li style="display:none;" class="carousel-item"><img src='http://dummyimage.com/100x100/00f03c/fff' /></li> </ul> <div id='left_scroll'><i id="slide-next" class="el el-chevron-left">next</i></div>
Comments
Post a Comment