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",
},
});

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);
});

Swiper Carousel Scrollbar not Accepting an Object as Argument

I'm working with the Swiper Carousel which allows for the option of a scrollbar. I can pass a string that signifies the scrollbar element but if I try to pass an object as per the docs here, I get an error: Cannot read property 'offsetWidth' of undefined name: TypeError
I've tracked this to the set method here where e.track should be an object where each key is a number and the value should be the element (scrollbar):
Again this works if I set the scrollbar option to a string, but not an object as per the docs. Has anyone seen this before/have any ideas how to get past it? Code below:
This version does not work:
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: {
el:'.swiper-scrollbar',
snapOnRelease:true,
draggable:true,
hide: false
},
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
This version does (but I cannot add the extra arguments - e.g. draggable & hide):
var mySwiper = new Swiper ('.swiper-container', {
loop: false,
slidesPerView: 'auto',
slidesPerGroup: 1,
clickable: true,
observer: true,
observeParents: true,
speed: 400,
spaceBetween: 10,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
observer: true,
scrollbar: '.swiper-scrollbar',
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loopedSlides: 2
}
}
})
EDIT: As a follow up, I'm not entirely sure which version of Swiper my client is using, but playing around on https://jsfiddle.net/ makes me think they have an outdated version. I've asked them to update and will close this if that is the case

Passing parameters with array in javascript

I have several instances of slider, and I need to pass the same parameters to every one.
I assume that I need array for that, but since I'm newbie in JS, I'm unsure how to do it properly.
Parameters looks for example like this:
spaceBetween: 20,
slidesPerView: 5,
breakpoints: {
600: {
slidesPerView: 2
},
991: {
slidesPerView: 3
},
1200: {
slidesPerView: 4
}
}
and slider instance:
var swiper1 = new Swiper('.swiper1', {
prevButton: '.b-prev-1',
nextButton: '.b-next-1',
//here I need to get the rest of the parameters
});
Thank you :)

Hi you can write like below
var swiper1 = new Swiper('.swiper1', [
prevButton: '.b-prev-1',
nextButton: '.b-next-1',
//here I need to get the rest of the parameters
]);

Try it
function(arrayP){
for(var i = 0; i < arrayP.length; i++){
alert(arrayP[i]); //no .value here
}
}
link:-Passing an array as parameter in JavaScript

You can use jQuery's $.extend() :
var extraDetails = {
spaceBetween: 20,
slidesPerView: 5,
breakpoints: {
600: {
slidesPerView: 2
},
991: {
slidesPerView: 3
},
1200: {
slidesPerView: 4
}
}
};
var swiper1 = new Swiper('.swiper1', $.extend({
prevButton: '.b-prev-1',
nextButton: '.b-next-1'
},
extraDetails
));

The most eloquent way of doing this in ES5 is to create a new config object for each slide, but base it off of a common object using $.extend. (Object.assign() is similar in VanillaJS)
var commonConfig = { spaceBetween: 20, slidesPerView: 5, breakPoints: { ... } };
var swiper1 = $.extend(true, {}, commonConfig, {
prevButton: '.b-prev-1',
nextButton: '.b-next-1'
});
var swiper2 = $.extend(true, {}, commonConfig, {
prevButton: '.b-prev-2',
nextButton: '.b-next-2'
});
It'd be cool to see more code -- I imagine you could loop over your DOM elements and create the config on-the-fly for each one. Something like:
$('.swiper').each(function(idx, el){
$(this).swiper({
spaceBetween: 20,
slidesPerView: 5,
breakPoints: { ... },
prevButton: '.b-prev-'+(idx+1),
nextButton: '.b-next-'+(idx+1)
});
});