I've been struggling with this functionality for the past few days as I am still learning javascript.
I'm using Swiper JS in my website and I have a list of links that are outside my swiper instance.
//SWIPER JS
$(".slider-main_component").each(function (index) {
let loopMode = false;
if ($(this).attr("loop-mode") === "true") {
loopMode = true;
}
let sliderDuration = 300;
if ($(this).attr("slider-duration") !== undefined) {
sliderDuration = +$(this).attr("slider-duration");
}
const swiper = new Swiper($(this).find(".swiper")[0], {
speed: sliderDuration,
loop: loopMode,
autoHeight: false,
centeredSlides: false,
followFinger: true,
freeMode: false,
slideToClickedSlide: true,
slidesPerView: 1,
spaceBetween: "4%",
rewind: false,
mousewheel: {
forceToAxis: true
},
keyboard: {
enabled: true,
onlyInViewport: true
},
breakpoints: {
// mobile landscape
480: {
slidesPerView: 1,
spaceBetween: "4%"
},
// tablet
768: {
slidesPerView: 1,
spaceBetween: "4%"
},
// desktop
992: {
slidesPerView: 1,
spaceBetween: "2%"
}
},
pagination: {
el: $(this).find(".swiper-bullet-wrapper")[0],
bulletActiveClass: "is-active",
bulletClass: "swiper-bullet",
bulletElement: "button",
clickable: true
},
navigation: {
nextEl: $(this).find(".swiper-next")[0],
prevEl: $(this).find(".swiper-prev")[0],
disabledClass: "is-disabled"
},
scrollbar: {
el: $(this).find(".swiper-drag-wrapper")[0],
draggable: true,
dragClass: "swiper-drag",
snapOnRelease: true
},
slideActiveClass: "is-active",
slideDuplicateActiveClass: "is-active"
});
swiper.on("slideChange", function (e) {
$(".tab-link").eq(e.realIndex).click();
});
});
I am trying to add some additional functionality that when I click on a link with the class of .home-gift-dropdown_dropdown-link, find the index of that .home-gift-dropdown_dropdown-link and then go to the slide that matches the index