Swiper JQuery if statement involving .hasClass and .toggleClass

Question

Without writing a novel of a backstory, using Swiper, I'm trying to call .toggleClass on an HTML element, whenever one of my swiper slides has the class of swiper-slide-active. This is so that I can have text appear on single slides, instead of all slides at the same time.

Here is a visual of what I'm describing: studioyonis.com — if you click the caption at the bottom so that the project information comes up, then drag RTL, you'll notice that the project information for the second project was also visible for a short time. It disappears (correctly) because of some other code I have, but l would like it to not appear at all (until I click the caption on that slide).

I've been trying this if statement to single out the active slide and help set up a subsequent click function, but its not working and I can't figure it out for the life of me. Can JQuery, for some reason, not see the swiper-slide-active when it happens?

if ($('.swiper-slide').hasClass('swiper-slide-active')) {
  $('.overlay-caption', this).toggleClass('overlay-caption-active');
  $('.overlay-caption-box', this).toggleClass('overlay-caption-box-active');
};

Here is a sample of my HTML structure. There are ~7 different slides like this, all with overlay-caption and overlay-caption-box classes.

<div class=“swiper-slide”>
  <div class=“caption-box information-00”>
    <a class=“caption links”>
      Text Text Text Text Text Text
    </a>
    <div class=“overlay-caption-box”>
    </div>
  </div>
  <div class=“overlay-caption”>
    <div class=“project-information”>
      Text Text Text Text Text Text Text Text Text Text Text Text
    </div>
  </div>
</div>

Hopefully this makes sense! Been a long 10-12 hours of work on this site today, only to realize this problem near the end of the night.

Cheers!

simplest solution is to remove display:block inline css from active element's overlay-caption within swipe handler, so that it will hide the caption before loading the next slide — dreamweiver
@dreamweiver I'm kind of rusty with my coding so I'm not quite sure how to implement what you're saying, but I managed to come up with a different solution this morning before commenting back haha. Instead of changing the display, I just locked swiping to different slides while the project information is visible. That way the user doesn't know all of the captions are open because s/he can't scroll to them. Thanks for your help! — Lukas Yonis Abubeker
Hmmm, I'm not sure if that's user friendly. Anyway can you post this as answer and close the question — dreamweiver
@dreamweiver You don't think so? I think it forces the user to slow down and look at each project, instead of quickly swiping through. Since its a portfolio site, maybe thats a good thing in this case... — Lukas Yonis Abubeker

Lukas Yonis Abubeker Lukas Yonis Abubeker · Accepted Answer · 2016-05-28T19:50:34

Instead of changing the display, I just locked swiping to different slides while the project information is visible. That way the user doesn't know all of the captions are open because s/he can't scroll to them. This forces the user to slow down and look at each project, instead of quickly swiping through. Since its a portfolio site, maybe thats a good thing in this case.

Swiper JQuery if statement involving .hasClass and .toggleClass

1 Answers