деактивировать кнопку на слайдере галереи

#javascript

Вопрос:

Я пытаюсь отключить мою кнопку слайдера javascript / jquery, когда она достигает конца прокрутки изображений (когда изображения полностью переместились вправо, кнопка moveRight должна быть деактивирована и оставить активной только кнопку moveLeft, то же самое для кнопки move leftButton), кто-нибудь может помочь с этим? Я не уверен, правильно ли я использую .attr () и removeAttr (). Я вставил свой код ниже.

 <script type="text/javascript">
$(document).ready(function(){

//Check width of Gallery div
var galleryWidth = $("#Gallery").innerWidth();
//Check width of GalleryItem
var NoListed = $("ul.GalleryItem li").length;
var galleryItemWidth = 1881;    

$('.MoveRight')
$('.GalleryItem').css('width', galleryItemWidth);

//Check width of Gallery div on resize
$(window).resize(function(){
    var galleryWidth = $("#Gallery").innerWidth();
  });

$('.MoveLeft').click(function() {
  $(".GalleryItem2").animate({"left": "-=350px"}, "slow");
  $(".GalleryItem3").animate({"left": "-=280px"}, "slow");
  $(".GalleryItem").animate({
    left: '-=230',
  }, "slow", function() {
    position = $(".GalleryItem").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft <= galleryWidth - galleryItemWidth) {
        $('.MoveLeft').removeAttr('disabled');}
        else{
        $('.MoveLeft').attr('disabled','disabled');
        $('.MoveRight').attr('disabled','disabled');
    }
  });
});

$('.MoveRight').click(function() {
  $(".GalleryItem2").animate({"left": " =350px"}, "slow");
  $(".GalleryItem3").animate({"left": " =280px"}, "slow");
  $(".GalleryItem").animate({
    left: ' =230',
  }, "slow", function() {
    position = $(".GalleryItem").position();
    galleryItemLeft = position.left;
    if(galleryItemLeft >= "0") { 
        $('.MoveLeft').removeAttr('disabled');}
        else{
        $('.MoveLeft').attr('disabled','disabled');
        $('.MoveRight').attr('disabled','disabled');
    }   
  });
});

});


</script>

Ответ №1:

Окей, для начала уберите эту запятую;

 left: '-=230',
-------------^

и добавить px здесь

 left: '-=230px'
------------^

затем попробуйте добавить это;

 if(galleryItemLeft <= 0) { 
    return false;
}

сразу после $('.MoveLeft').click(function() {
и то же самое для правильного

1. Спасибо, Йохан. Это не влияет на слайдер. Вы имеете в виду поместить условие выше внутри функции или ниже (после) нее? Есть еще идеи?

2. непосредственно перед началом скольжения, таким образом, функция вернется и пропустит оставшуюся часть блока

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

4. это то, что возвращает false, значит, что-то не так с вашим условием в операторе if

5. Правильно ли я использую .removeAttr (‘disabled’);} и .removeAttr (‘disabled’);} ?