We Keep Coding

How to add two swiper sliders with the same classes

I have an ACF + Gutenberg block that has a slider. There can be two such blocks on one page. How can I use two sliders with the same class on a page?
const selectedProductsSwiper = new Swiper(".product-swiper", {
centeredSlides: true,
speed: 1000,
slidesPerView: "auto",
modules: [Pagination, Controller, Navigation],
pagination: {
el: ".product-swiper__progressbar",
type: "progressbar",
},
navigation: {
nextEl: ".product-swiper__arrow-next",
prevEl: ".product-swiper__arrow-prev",
},
});

How to create a custom progress bar with numbers in Swiper

I have a progressbar in my Swiper slider. I need to make it so that the maximum number of slides is displayed on the right, and "01" on the left. When scrolling, they should not change, just static numbers for the minimum and maximum slides. How can i do this?
const swiper = new Swiper("mySlider", {
centeredSlides: true,
allowTouchMove: true,
navigation: {
nextEl: ".my-arrow__next",
prevEl: ".my-arrow__prev",
},
pagination: {
el: "my-pagination",
type: "progressbar",
},
});

Make thumbs scroll one at a time in SwiperJS

Trying to make a simple carousel with an associated thumbs carousel under it:
// Thumbs
const galleryThumbs = new Swiper(thumbsElement, {
spaceBetween: 10,
slidesPerView: 4,
scrollbar: true,
breakpoints: {
768: {
slidesPerView: 8,
},
},
});
// Slides
const galleryTop = new Swiper(top, {
spaceBetween: 10,
effect: "fade",
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
multipleActiveThumbs: false,
thumbs: {
swiper: galleryThumbs,
},
});
This is working as described, but I have a problem:
When one scrolls to the next image using the navigation arrows, and the corresponding thumbnail is out of sight, the thumbnails scroll in group(by the amount described in the slidesPerView setting). I'm looking for a way for it to scroll just by one, as it does when scrolling with the back arrow.

Swiper 5.4.5 thumbs gallery multiple instances not working in same page

Swiper 5.4.5 thumbs gallery multiple instances not working in the same page swiper version 5.4.5
var galleryThumbs = new Swiper('.gallery-thumbs', {
spaceBetween: 10,
slidesPerView: 4,
loop: true,
freeMode: true,
loopedSlides: 5, //looped slides should be the same
watchSlidesVisibility: true,
watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
spaceBetween: 10,
loop: true,
loopedSlides: 5, //looped slides should be the same
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
thumbs: {
swiper: galleryThumbs,
},
});

/**
* Multiple Swiper Slides
* #require Swiper v4.X
* #author palash chandra
* #author website palashchandra.xyz
*/
const multipleSwiperSlides = function() {
let sliderMain = document.querySelectorAll('.swiper-container.js-slider--main')
let sliderNav = document.querySelectorAll('.swiper-container.js-slider--nav')
let mainArray = [];
let navArray = [];
// Slider Main
sliderMain.forEach(function(element, i) {
// Push swiper instance to array
mainArray.push(
new Swiper(element, {
loop: true,
loopedSlides: 3,
})
);
});
// Slider Nav
sliderNav.forEach(function(element, i) {
var self = sliderNav;
// Push swiper instance to array
navArray.push(
new Swiper(element, {
slidesPerView: 3,
loop: true,
loopedSlides: 3,
slideToClickedSlide: true,
spaceBetween: 5,
navigation: {
nextEl: self[i].querySelector('.swiper-button-next'),
prevEl: self[i].querySelector('.swiper-button-prev')
}
})
);
});
const checkOnPage = function() {
if (sliderMain.length > 0 && sliderNav.length > 0) {
let numberOfSlides = mainArray.length || navArray.length || 0;
if (mainArray.length !== navArray.length) {
console.warn('multipleSwiperSlides: Number of main slides and nav slides is different. Expect incorrect behaviour.');
}
for (let i = 0; i < numberOfSlides; i++) {
mainArray[i].controller.control = navArray[i];
navArray[i].controller.control = mainArray[i];
}
console.log('multipleSwiperSlides: Things should be working fine. B)');
}
}
checkOnPage();
}
multipleSwiperSlides();

Swiper wrapper didn't update when I update swiper instance (Swiper JS)

I have four buttons to show/hide slide card based on user selection. I show all products by default in total 10 cards. When changed to other options (the slide that only have four cards), there is a white space left. I tried to update with $productSlider.update() but it didn't work.
Demo Code (codesandbox)
Swiper Init
let $productSlider = new Swiper('.plan-slider-container', {
init: false,
observer: true,
observeParents: true,
observeSlideChildren: true,
spaceBetween: 0,
mousewheel: {
releaseOnEdges: true,
forceToAxis: true
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
keyboard: true,
scrollbar: {
el: '.swiper-scrollbar',
draggable: true,
hide: false,
},
breakpoints: {
320: {
slidesPerView: 1,
},
768: {
freeMode: true,
slidesPerView: 'auto'
}
}
});
User Selection Button
$('.choice-plan-btn-wrapper.desktop').on('click', e => {
let target = e.target;
let id = target.getAttribute('id');
let $parent = $(target).parent();
let lastActiveSiblingId = $(target).siblings('.active').attr('id');
if (target.tagName.toLowerCase() != 'button' || target.classList.contains('active')) return;
// button
$(target).addClass('active')
.siblings('.active').removeClass('active');
/* The Problem */
$parent.siblings('.plans-swiper-wrapper')
.children(`.${id}`).fadeIn('slow')
.siblings().not(`.${id}`).fadeOut('slow');
$productSlider.update();
/* The Problem */
$parent.siblings('.swiper-scrollbar')
.removeClass(`${lastActiveSiblingId}`)
.addClass(`${id}`)
$productSlider.slideTo(0, 500);
});