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

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. start.....当 slider 加载第一张幻灯片时触发。
2. end......当 slider 到达最后一张幻灯片时触发(异步)。
3. 之前..与每个 slider 动画异步触发。

所以你可以做的是:

$('.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(可能代替类 - 或两者兼而有之)，作为一种好的做法。