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() {
    //
    }
});

对于下面的文字感到抱歉，我忘了阅读您的代码＆gt;。＆lt; （你已经拥有的）

快速googlesearch引导我访问此网站：FlexSlider API

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

属性，默认，描述

start .....滑块加载第一张幻灯片时触发。
end ......当滑块到达最后一张幻灯片（异步）时触发。
before..Fires与每个滑块动画异步。

所以你能做的就是：

$('.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（可能代替类 - 或两者）作为一种良好的做法。

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

1 个答案: