Question

我有一个包含覆盖我的flexslider的链接的div。我需要链接的颜色根据显示的幻灯片而改变。

因此，如果.slides li具有类.is-light，则需要将类.is-light添加到div（覆盖）之外的其他位置（其他）添加类.is-dark

我设法让它在第一次更改（幻灯片1到2）上工作，但之后没有任何反应。任何想法为什么会这样？

$slider.flexslider({
animation: 'fade',
animationSpeed: 500,
pauseOnHover: false,
keyboard: true,
touch: true,
controlNav: false,
before: function() {
          if ($('.slides li').hasClass('is-light')) {
            $('.site-header__text-links a').addClass('is-light');
          } else {
            $('.site-header__text-links a').addClass('is-dark');
          };
        }
});

Answer 1

所以在环顾四周之后我终于找到了flexslider的回调函数。

$('.flexslider').flexslider({
    animation: "slide",
    after: function(slider){
        var curSlide = slider.find("li.flex-active-slide");
        // get all the classes on the <li> element
        var bg_class = $(curSlide).attr('class');
        // remove the flex-active-slide class name
        bg_class = bg_class.replace("flex-active-slide", "");
        // remove all the classes 
        $('body').removeClass('is-light');
        $('body').removeClass('is-dark');
        // add the active-slide
        $('body').addClass(bg_class);   
        // test the output in the debug window
        console.log(bg_class);
    }     
});

HTML非常简单，这是基本版本。

<div class="flexslider">        
    <ul class="slides">         
        <li class="is-light">
            <img src="src to your image" alt="alt">
        </li>
        <li class="is-dark">
            <img src="src to your image" alt="alt">
        </li>           
    </ul>   
</div>

我使用Wordpress＆amp; ACF中继器注入类和图像。希望这有助于某人：）

根据当前幻灯片将类添加到Flexslider外部的div？

1 个答案: