jQuery prev/next 滑块 --> 如何在第一张/最后一张幻灯片上禁用 prev/next？答案

【问题标题】：jQuery prev/next slider --> how to disable prev/next on first/last slide?jQuery prev/next 滑块 --> 如何在第一张/最后一张幻灯片上禁用 prev/next？
【发布时间】：2017-06-25 22:28:19
【问题描述】：

这里是：https://jsfiddle.net/t2zwo0fr/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; }
        });
            });

【问题讨论】：

可以在每次点击时增加/减少一个计数器并与 slideCount 或零进行比较以隐藏/显示适当的按钮
...它可能会起作用
是一种常见的方法......会工作

标签： javascript jquery slider

【解决方案1】：

你可以使用索引：

var slideIndex = 0;

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

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

【讨论】：

OP 已经有变量slideCount 具有length。无需重复代码
glegoux 谢谢你的回答。我不能投票还没有足够的信誉积分

【解决方案2】：

有比我类似甚至更好的解决方案。但我建议并做的是向<ul> 添加一个data-slide 属性，该属性保存当前幻灯片。我从 1 开始。

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

【讨论】：