Question

我想在以下情况下禁用下一个/上一个按钮：

在边框内第一张幻灯片时禁用上一个按钮;
动画到达最后一张幻灯片时禁用下一个按钮;

换句话说：
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;

下一步：if slideIndex < slideCount - 1然后next和slideIndex++ 上一篇：if slideIndex > 0然后是prev和slideIndex--。

请参阅：https://jsfiddle.net/t2zwo0fr/8/

Answer 2

有比我更类似甚至更好的解决方案。但我的建议和做法是向data-slide添加<ul>属性，其中包含当前幻灯片。我从1开始。

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

jQuery上一个/下一个滑块 - ＆gt;如何禁用第一张/最后一张幻灯片上的prev / next？

2 个答案: