Question about the problem with several sliders on one page - cannot understand?!

[Voodoopupp]

Hello,

I can't quite understand the problem with multiple sliders on the same page that are supposed to use the same settings.

Examples e.g.:
#273
#3797
#50
https://raddy.dev/blog/multiple-instances-of-swiperjs-on-the-same-page-with-the-same-settings/

It is written again and again that there are different solutions for this: either one simply initiates Swiper with a unique CSS class each time and then defines this multiple times in javascript or one builds a loop and then dynamically initiates different classes.

I have created a simple test here, where every swiper has the same class and it still works without problems - both the pagination and the navigation arrows:
https://codepen.io/voodoopupp/pen/PoxyaXa

I just don't understand why this works for me, but the question about "multiple initiation" keeps coming up again and again?

Can someone here enlighten me in a simple way? What am I missing?

Greetings
Voodoopupp

[spacedev75]

because of this :

swiper/src/core/core.mjs

Lines 71 to 83 in 2f61fda

	if (
	params.el &&
	typeof params.el === 'string' &&
	document.querySelectorAll(params.el).length > 1
	) {
	const swipers = [];
	document.querySelectorAll(params.el).forEach((containerEl) => {
	const newParams = extend({}, params, { el: containerEl });
	swipers.push(new Swiper(newParams));
	});
	// eslint-disable-next-line no-constructor-return
	return swipers;
	}

[Voodoopupp]

Okay, thanks for that.

Unfortunately I am not that firm at Javascript. Can you just give me a short explanation of that in words? What exactly is it doing there?

Thank you very much for your help :)

[spacedev75]

It checks if there is more than 1 element with the class provided, if so it creates a new swiper instance for each elements