javascript - jQuery 上一张/下一张 slider --> 如何禁用第一张/最后一张幻灯片上的上一张/下一张？

Question

这里是:https://jsfiddle.net/t2zwo0fr/2/

我想要的是在以下情况下禁用下一个/上一个按钮:

1. 当第一张幻灯片出现在边框内时禁用上一个按钮；

2. 当动画到达最后一张幻灯片时禁用下一个按钮；

   换句话说:

   1. 在部分内的第一张幻灯片预设上，我想防止 slider 进一步向右移动并且...

   2. 在部分内的最后一张幻灯片上，我想防止 slider 不再向左移动；

HTML:

 <a href="" class="prev">prev</a>
 <a href="" class="next">next</a>
<section>
  <ul>
    <li>
        West African lion population is particularly endangered.
    </li>
    <li>
        West African lion population is particularly endangered.
    </li>
      <li>
        West African lion population is particularly endangered.
    </li>  
  </ul>
</section>

jQuery:

  var szer1slidu = $('ul li').width();
  var wys1slidu = $('ul li').height();
  var slideCount = $('ul li').length;
  var calosc = slideCount * szer1slidu;
  var active = false;

    $('section').css({
    width: szer1slidu,
    height: wys1slidu
  });

    $('ul').css ({
    width: calosc
  });

    $('.next').click(function(e) {

            e.preventDefault();
           if (active) {
               return;
             }
          active = true;
        $('ul').animate({'left': $('ul').position().left-szer1slidu},                   2000, function() { { active = false; }
        });   
  });


    $('.prev').click(function(e) {
        e.preventDefault();
          if (active) {
                return;
            }
        active = true;
        $('ul').stop().animate({
          'left': $('ul').position().left+szer1slidu}, 2000, function() {
        { active = false; }
        });
            });

Answer 1

您可以使用索引:

var slideIndex = 0;

下一个:if slideIndex < slideCount - 1然后next和slideIndex++ .
上一条:if slideIndex > 0然后prev和slideIndex-- .

参见:https://jsfiddle.net/t2zwo0fr/8/