Предотвращение прокрутки

Question

После изучения, изучая учебные пособия, получая некоторую помощь здесь, я почти получил этот скрипт, работающий по назначению. Тем не менее, я не стою, и мой мозг болит, пытаясь понять логику.

Проблема заключается в том, что скрипт позволяет прокручивать вперед. Как я могу это остановить?

JQuery:

var $item = $('.slider'), 
    start = 0, 
    view = $('#main-header').width(), 
    end = $('.slider').width(); 

$('.next').click(function() { 
    if (start < view) { 
     start++; 
     $item.animate({ 
      'left': '-=100%' 
     }); 
    } 
}); 

$('.prev').click(function() { 
    if (start > 0) { 
     start--; 
     $item.animate({ 
      'left': '+=100%' 
     }); 
    } 
}); 

HTML:

<div id="main-header"> 
    <div class="slider"> 
     <div class="item-post" style="background: url(http://4.bp.blogspot.com/-LjJWOy7K-Q0/VOUJbMJr0_I/AAAAAAAAdAg/I2V70xea8YE/s320-c/enviroment-5.jpg) center"></div> 
     <div class="item-post" style="background: url(http://1.bp.blogspot.com/-l3UnbspFvv0/VOUK8M-34UI/AAAAAAAAdA0/ooGyXrHdNcg/s320-c/enviroment-2.jpg)"></div> 
     <div class="item-post" style="background: url(http://2.bp.blogspot.com/-cun1kQ42IBs/VOUaSPfnebI/AAAAAAAAdBQ/yTEj9K-BGdk/s320-c/fashion-3.jpg)"></div> 
    </div> 
    <div class="prev"></div> 
    <div class="next"></div> 
</div> 

CSS:

#main-header { 
    overflow: hidden; 
    position: relative; 
} 
.slider { 
    width: 100%; 
    height: 200px; 
    position: relative; 
} 
.item-post { 
    width: 100%; 
    height: 200px; 
    background: rgba(0, 0, 0, 0.1); 
    background-size: cover !important; 
    background-position: center !important; 
    position: absolute; 
    top: 0; 
} 
.item-post:first-of-type { 
    left: 0; 
} 
.item-post:nth-of-type(2) { 
    left: 100%; 
} 
.item-post:last-of-type { 
    left: 200%; 
} 
.prev, .next { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 25px; 
    background: rgba(0, 0, 0, 0.2); 
    cursor: pointer; 
} 
.prev { 
    left: 0; 
} 
.next { 
    right: 0; 
} 

jsfiddle: http://jsfiddle.net/51maaks8/8/

Answer 1

Для того, чтобы определить, есть ли там еще один слайд видно, вы можете создать функцию, которая добавит значение .offsetLeft родительского элемента к значению .offsetLeftпоследнему видимый элемент слайда и его ширина. Затем вы вычитали бы ширину родительского элемента из суммы этих вычислений.

При этом вы по существу вычисляете положение последнего элемента слайда относительно влево в позиции .item-wrapper.

function moreVisibleSlides() { 
    var $last = $('#slider > .item-wrapper > .item-post:last:visible'), 
     positionRelativeToParent = $last.parent()[0].offsetLeft + $last[0].offsetLeft + $last.width() - $item.width(); 

    return positionRelativeToParent > 5; 
} 

Для слушателя событий щелчка, только скользит элемент, если есть более видимые горки, которая определяется булевыми возвращаемой функцией moreVisibleSlides. Кроме того, я также добавил чек (!$item.is(':animated')), чтобы предотвратить анимацию следующего слайда, если в данный момент выполняется анимация. Это гарантирует, что вы не можете нажимать кнопку .next несколько раз во время анимации, а затем на прокрутку независимо от того, есть ли более видимые слайды.

Updated Example

$('.next').click(function() { 
    if (moreVisibleSlides() && !$item.is(':animated')) { 
     start++; 
     $item.animate({ 
      'left': '-=100%' 
     }); 
    } 
});