I am using swiper.js and my code:
$(function () {
var elements = new Swiper(".elements", {
effect: "fade",
spaceBetween: 10,
mousewheel: true,
grabCursor: true,
fadeEffect: {
crossFade: true,
}
});
$(".element li").on("click", function () {
var element = $(this).attr('aria-label');
$(".element li").removeClass("actived");
$(this).addClass("actived");
});
$('.elements .swiper-slide[aria-label="' + element + '"').addClass("swiper-slide-active swiper-slide-visible");
});.element li {color:blue;}
.element li.actived {color:red;}<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
</head>
<div>
<div class="swiper elements">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://clubhouse.swingu.com/wp-content/uploads/2024/08/philcareer.jpg" />
</div>
<div class="swiper-slide">
<img src="https://clubhouse.swingu.com/wp-content/uploads/2024/08/2025schedule.jpg" />
</div>
<div class="swiper-slide">
<img src="https://clubhouse.swingu.com/wp-content/uploads/2024/08/scottiefedex.jpg" />
</div>
</div>
</div>
<div class="element">
<ul>
<li aria-label="1 / 3">One</li>
<li aria-label="2 / 3">Two</li>
<li aria-label="3 / 3">Three</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</html>I can’t add class swiper-slide-active swiper-slide-visible when I use:
$(‘.elements .swiper-slide[aria-label=”‘ + element + ‘”‘).addClass(“swiper-slide-active swiper-slide-visible”);
Can you help me? Thank you!