Flexislider删除第一张和最后一张幻灯片上的导航箭头

Question

我搜索了一整天，却找不到任何帮助我的东西。

我正在使用Flexislider，并试图删除第一张幻灯片上的上一个链接和最后一张幻灯片的下一个链接。

我甚至把我的第一张和最后一张幻灯片包装在一个div中，将它们与其他幻灯片分开。

这是我的网站：http://www.thisiseloise.co.uk/Mobile/

这是我的代码atm，但它不起作用：

    $('#first').flexslider({
    start: function(){
     var active_rel = $(this).find('.flex-direction-nav .flex-prev').css('display:none');
    },
  });
   $('#last').flexslider({
    end: function(){
     var active_rel = $(this).find('.flex-direction-nav .flex-prev').css('display:none');
    },
  });

任何帮助都将不胜感激：）

感谢

Answer 1

您应该尝试这种机制：

$('.flexslider').flexslider({
    animation: 'fade',
    controlsContainer: '.flexslider',
    start: function() {
        // 
    },
    end: function() {
    //
    }
});

---

很抱歉收到下面的文字，我忘记阅读您的代码><（你已经拥有的）

---

一个快速的谷歌搜索引导我到这个网站：FlexSlider API

在这里你可以看到你可以挂钩：

属性，默认，描述

1. 开始。。。。。滑块加载第一张幻灯片时激发
2. 结束。。。。。。当滑块到达最后一张幻灯片时激发（异步）
3. 之前。。与每个滑块动画异步激发

所以你可以做的是：

$('.flexslider').flexslider({
    animation: 'fade',
    controlsContainer: '.flexslider'
}).before(function() {
    // Reset before each slide (cheap operation so it's no biggie to call everytime)
    $(".flex-direction-nav").removeClass("firstActive lastActive");
}).start(function() {
    // 
    $(".flex-direction-nav").addClass("firstActive");
}).end(function() {
    //
    $(".flex-direction-nav").addClass("lastActive");
});

和CSS：

.flex-direction-nav.firstActive, .flex-direction-nav.lastActive {
    opacity: 0;  // You can think about how to hide it, with transition or sth.
}

我进一步建议使用ID（可能不是类，或者两者兼有），这是一种很好的做法。