Carousel: applying alt-buttons class to another class
-
Hi everyone
I've got a Carousel slideshow where I make use of the alt-buttons function for my numbers; that's working well. Since I want my captions not beside my numbers (and I don't want a proper caption for each slide, more like a fixed title for all slides in the show), I'm dealing with the issue of how I can adapt the alt-buttons function to another element/class. I mean this is pretty simple, you only have to add the class .alt-buttons to that element. But remember that I have a fixed title that is visible through all slides; if I would add .alt-buttons to that element, the .alt-buttons class would be active for all slides. My goal is to achieve that this class is only active for those slides that have the alt-buttons function activated and not for the whole slideshow. I hope my thoughts are clear till here.
Well, I noticed that if a slide has the alt-buttons function active, it automatically gets the class .alt-buttons; and if I swipe to the next slide – where the alt-buttons function is inactive – the class isn't added anymore. Based on this, I thought I simply have to code a jQuery which says if element "xy" has class .alt-buttons then add .highlight to class .Title and there I am. But it's not working.
This is my carousel and below my code: https://raphaelmathias.de/projects/wp1_krizolbricht/till/
window.laytheme.on("newpageshown", function(layoutObj, type, obj){ if(type == "project"){ jQuery(function () { if (jQuery('.lay-carousel-wrap').hasClass('alt-buttons')) { jQuery('._Titel').addClass('highlight'); } }); } });
.highlight { background-color:#ff0; }
My jQuery is working when I use the following classes .lay-carousel-slide and .lay-use-alt-buttons, but then the class .highlight is added to all slides of the slideshow and not to a certain slide.
window.laytheme.on("newpageshown", function(layoutObj, type, obj){ if(type == "project"){ jQuery(function () { if (jQuery('.lay-carousel-slide').hasClass('lay-use-alt-buttons')) { jQuery('._Titel').addClass('highlight'); } }); } });
.highlight { background-color:#ff0; }
Any thoughts are welcome! Thanks.
Best
Raphael
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it