jQuery bind / unbind not working

Question

I'm trying to create a simple slider. Here is a example but slider next and prev button not working properly.

 // next var next = $('.next').click(function() { var storepos = $(".storepos").val(); $('.prev').bind('click'); $('.storepos').val($('.storepos').val() / 1 + 110); $('.container').animate({ scrollLeft: $('.storepos').val() }, 200); }); //prev $('.prev').click(function() { var storepos = $(".storepos").val(); $('.next').bind('click'); $('.storepos').val($('.storepos').val() / 1 - 110); $('.container').animate({ scrollLeft: $('.storepos').val() }, 200); }); //after scrollend right event $('.container').bind('scroll', function() { if ($('.container').scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) { $('.next').unbind('click'); } }); //after scrollend left event $('.container').bind('scroll', function() { if ($('.container').scrollLeft() < 1) { $('.prev').unbind('click'); } }); 

 .container { overflow: hidden !important } .container::-webkit-scrollbar { width: 0; height: 0 } .content { width: 1600px } .items { background: black; color: white; margin-left: 10px; width: 100px; height: 100px; float: left; text-align: center } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> <div class="items">7</div> <div class="items">8</div> <div class="items">9</div> <div class="items">10</div> </div> </div> <a href="#" class="prev">Prev</a> / <a href="#" class="next">Next</a> <input class="storeposx" value="" /> <input class="storepos" value="" /> 

fiddle

Answer 1

I see two errors. First, the previous button is active from the begging, enabling scrolling to negative values. Second, you do unbind the events when reaching the end both sides, but you're not bind them back after that.

I used two variables where I keep the buttons status. When I reach the start or end position I don't unbind them, instead I just return false on click.

 // next var next = $('.next').click(function() { if (!nextIsActive || $('.container').is(':animated')) return false; var storepos = $(".storepos").val(); $('.prev').bind('click'); $('.storepos').val($('.storepos').val() / 1 + 110); $('.container').animate({ scrollLeft: $('.storepos').val() }, 200); }); //prev $('.prev').click(function() { if (!prevIsActive || $('.container').is(':animated')) return false; var storepos = $(".storepos").val(); $('.next').bind('click'); $('.storepos').val($('.storepos').val() / 1 - 110); $('.container').animate({ scrollLeft: $('.storepos').val() }, 200); }); var nextIsActive=true; var prevIsActive=false; //after scrollend right event $('.container').bind('scroll', function() { if ($('.container').scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) { nextIsActive=false; }else{ nextIsActive=true; } }); //after scrollend left event $('.container').bind('scroll', function() { if ($('.container').scrollLeft() < 1) { prevIsActive=false; }else{ prevIsActive=true; } }); 

 .container{overflow:hidden !important} .container::-webkit-scrollbar { width:0; height:0 } .content {width:1600px} .items { background:black; color:white; margin-left:10px; width:100px; height:100px; float:left; text-align:center } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content"> <div class="items">1</div> <div class="items">2</div> <div class="items">3</div> <div class="items">4</div> <div class="items">5</div> <div class="items">6</div> <div class="items">7</div> <div class="items">8</div> <div class="items">9</div> <div class="items">10</div> </div> </div> <a href="#" class="prev">Prev</a> / <a href="#" class="next">Next</a> <input class="storeposx" value="" /> <input class="storepos" value="" />