I have a carousel on my homepage . When the third carousel appears, the carousel buttons div class="rotator-controls"
move down due to the image taking space. My goal here is to keep this div the same height as the other 4. Which means that when the <span>
(index 2) of the grandchild div <div class="rotator-pagination">
is active, I apply the correct css to the <div class="rotator-controls">
(eg bottom:60px). As the carousel is jQuery cycle 2, when the span is active it has the class cycle-pager-active
.
I have tried using domcontentloaded. ie
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";
}
});
This does not work. But if I do this in the console, and wait for the 3rd carousel to be acitve, using jQuery(span).hasClass("cycle-pager-active")
returns true
. How do i apply css (to its grandparent element) only when the span element is active?
Try this
.banner-content-area {
min-height: 440px;
}
if not work then add min-height: 440px;important;
This works perfectly:
.banner-content-area {
min-height: 440px;
}
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.