Lukas Yonis Abubeker Lukas Yonis Abubeker - 1 year ago 52
jQuery Question

Swiper JQuery if statement involving .hasClass and .toggleClass

Without writing a novel of a backstory, using Swiper, I'm trying to call

on an HTML element, whenever one of my swiper slides has the class of
. 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: — 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
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

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

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.



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.