Question

我正在寻求帮助，在自制的JQuery Slider上显示和隐藏定向导航箭头。滑块一次显示2-3个图像，具体取决于视口。我希望能够在最后一张幻灯片以全视图显示时隐藏下一个（右）箭头，并在第一张幻灯片返回到视图中的第一个项目时隐藏上一个（左）箭头。

试图找到一种方法来了解第一张和最后一张幻灯片的位置，因为列表元素的数量会改变，而不是一个固定的数字。

$(document).on( 'click', '.control-right', function() {
  var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
  var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) - itemWidth;
  $(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});
$(document).on( 'click', '.control-left', function() {
  var itemWidth = $(this).parent().children('.module-slider').children('.slider-list').children('.slider-item').outerWidth() + 20;
  var leftIndent = parseInt($(this).parent().children('.module-slider').children('.slider-list').css('left')) + itemWidth;
  $(this).parent().children('.module-slider').children('.slider-list').animate({left: leftIndent}, 400);
});

标记模板如下

<div class="module">
  <div class="slider-control control-left"></div>
  <div class="slider-control control-right"></div>
  <div class="module-slider">
    <ul class="slider-list">
     <li class="slider-item"></li>
    </ul>
  </div>
</div>

Answer 1

我看到两种方法。因为我不知道你的滑块代码，我会建议一些。

如果要检测元素的位置，可以使用JQuery的position()方法

通过这种方式，您可以检测到元素的位置并发生某些事情。但除此之外，如果我制作一个滑块，我会做的是给当前滑块一个类".active"，然后在我的javascript中我将使用条件来检查类".active"的元素意思是它显示出来。

这样的事情：

if( $(".element").hasClass("active") ){
     //do something
}

这些只是建议，您可以以任何方式满足您的需求。

基于First＆amp; amp;显示/隐藏JQuery滑块导航最后幻灯片

1 个答案: