0

I want to target sdf-carousel-item that has an ID of "first" and only when class of "active" is present. However this is a carousel - so when the first slide is showing, the class of "active" is added. when someone goes to slide 2 for example, the "active" gets removed on the first slide, and added to the second slide.

To start I just want to target the "active" and this is what so far (check code snippet).

const carouselModal = document.querySelector("sdf-carousel-item");
if(carouselModal.matches("#first.active")){
  console.log("carousel one is active");

  }
<sdf-carousel-item id="first" style="height: auto; display: block; width: 50%;" role="group" aria-roledescription="slide" aria-label="1 of 2" class="first-in-page last-in-page active">test one</sdf-carousel-item>

Yes on the code snippet it works great. but I think the problem is that this class of "active" is added AFTER page load, so it's not working when i try it inside the actual page.

SO the, I tried to wrap the entire function around window.addEventListener("load", function(){} but that didn't do anything. Any reason why that didn't work? Is there a better alternative?

6
  • 2
    What causes the "active" class to be added to the element? Commented Mar 14 at 20:48
  • Do I understand you correctly: you mean a CSS class? If so, why would you need to check it? You just need to provide an appropriate class(es)... Commented Mar 14 at 20:55
  • @mykaf the active classes is added to the first page when the modal popup is loaded onto the screen. does that help? Commented Mar 17 at 13:38
  • Can you check for then? Commented Mar 17 at 13:40
  • @mykaf i don't quite understand? Commented Mar 17 at 13:45

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.