jQuery bind/unbind не работает

Question

Я пытаюсь создать простой слайдер. Вот пример, но кнопка слайдера next и prev не работает должным образом.

// 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

Я вижу две ошибки. Во-первых, предыдущая кнопка активна от попрошайничества, позволяя прокручивать до отрицательных значений. Во-вторых, вы отключаете события, когда достигаете конца с обеих сторон, но после этого вы не связываете их.

Я использовал две переменные, где я сохраняю статус кнопок. Когда я достигаю начальной или конечной позиции, я не отвязываю их, вместо этого я просто возвращаю false при нажатии.

// next 
 
var next = $('.next').click(function() { 
 
\t if (!nextIsActive || $('.container').is(':animated')) return false; 
 
\t var storepos = $(".storepos").val(); 
 
\t $('.prev').bind('click'); 
 
\t $('.storepos').val($('.storepos').val()/1 + 110); 
 
\t $('.container').animate({ 
 
\t \t scrollLeft: $('.storepos').val() 
 
\t }, 200); 
 
}); 
 

 
//prev 
 
$('.prev').click(function() { 
 
\t if (!prevIsActive || $('.container').is(':animated')) return false; 
 
\t var storepos = $(".storepos").val(); 
 
\t $('.next').bind('click'); 
 
\t $('.storepos').val($('.storepos').val()/1 - 110); 
 
\t $('.container').animate({ 
 
\t \t scrollLeft: $('.storepos').val() 
 
\t }, 200); 
 
}); 
 

 
var nextIsActive=true; 
 
var prevIsActive=false; 
 
//after scrollend right event 
 
$('.container').bind('scroll', function() { 
 
\t if ($('.container').scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) { 
 
\t \t nextIsActive=false; 
 
\t \t }else{ 
 
\t \t nextIsActive=true; 
 
\t } 
 
}); 
 
//after scrollend left event        
 
$('.container').bind('scroll', function() { 
 
\t if ($('.container').scrollLeft() < 1) { 
 
\t \t prevIsActive=false; 
 
\t \t }else{ 
 
\t \t prevIsActive=true; 
 
\t } 
 
});

.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="" />