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.