javascript - Scrolling div horizontally -
how can make scroll left or right using navigation button?
<div class="slider-wrap"> <div class="slide-wrap"> <div class="slider-slide-wrap"></div> <div class="slider-slide-wrap"></div> <div class="slider-slide-wrap"></div> </div> </div> <div id="slider-left" class="slider-nav"></div> <div id="slider-right" class="slider-nav"></div>
js
$("#slider-left").click(function(){ alert("< clicked."); }); $("#slider-right").click(function(e){ alert("> clicked."); $('.slide-wrap').scrollleft(5000); });
you selecting wrong <div>
. note selector: $('.slider-wrap')
(not .slide-wrap
).
$("#slider-left").click(function () { $('.slider-wrap').animate({ scrollleft: 0 }, 200); });
i have used .animate
because visual feedback what's happening (so think using animate better ux). work equally .scrollleft()
though:
$("#slider-left").click(function () { $('.slider-wrap').scrollleft(0); });
see working in fiddle
Comments
Post a Comment