On my homepage, I have a carousel featuring multiple slides. However, when the third slide appears in the carousel, the positioning of the carousel buttons within the div class="rotator-controls" shifts downward due to the space taken up by the image. My objective is to maintain this div at the same height as the other four carousel slides. Therefore, when the <span> (specifically index 2) of the nested div
<div class="rotator-pagination">cycle-pager-active, I need to apply proper CSS styling to the <div class="rotator-controls">cycle-pager-active.
I attempted to address this issue using the domcontentloaded event like so:
document.addEventListener("DOMContentLoaded", function() {
var span = document.querySelector("#homepage-rotator > div.banner.cycle-slide.cycle-slide-active > div > div.banner-content-area > div.rotator-controls > div.rotator-pagination").children[2];
if (jQuery(span).hasClass("cycle-pager-active")){
var grandPDiv = document.querySelector("div.rotator-controls");
grandPDiv.style.bottom = "-60px";
}
});
Despite implementing this solution, it did not yield the desired results. However, upon performing the same action in the console and waiting for the third carousel slide to activate, the condition
jQuery(span).hasClass("cycle-pager-active")true. How can I effectively apply CSS styles to the parent element only when the specified span element is active?