简体   繁体   中英

Add class to div outside Flexslider dependant on current slide?

I have a div containing some links that overlay my flexslider. I need the colour of the links to change dependant on the slide thats being displayed.

So if .slides li has the class .is-light the class .is-light needs to be added to the div outside (overlaying) the flexslider else add the class .is-dark

I managed to get it to work on the first change (slide 1 to 2 ) but after that nothing happens. Any ideas why this might be?

$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');
          };
        }
});

So after looking around I finally figured out the callback function for 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);
    }     
}); 

The HTML is very simple, this is the basic version.

<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>

I use Wordpress & ACF repeater to inject the class and images. Hope this helps someone :)

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM