jQuery prev / next滑塊 - >如何在第一張/最后一張幻燈片上禁用prev / next？

Question

這是： https ： //jsfiddle.net/t2zwo0fr/2/

我想在以下情況下禁用下一個/上一個按鈕：

1. 當第一張幻燈片出現在邊框內時禁用上一個按鈕;

2. 動畫到達最后一張幻燈片時禁用下一步按

   換一種說法：

   1. 在第一張幻燈片預設內部部分，我想阻止滑塊再往前走......

   2. 在最后一張幻燈片中，我希望防止滑塊向左移動;

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;

next： if slideIndex < slideCount - 1然后next和slideIndex++ 。
prev： if slideIndex > 0則prev和slideIndex-- 。

請參閱： https ： //jsfiddle.net/t2zwo0fr/8/

Answer 2

有比我更類似甚至更好的解決方案。 但我建議和做的是將data-slide屬性添加到<ul> ，其中包含當前幻燈片。 我從1開始。

檢查JSFiddle： https ：//jsfiddle.net/junaidkbr/1zt3qLb5/4/