Support for multiple pagination elements.

[jaimyvangerrevink]

Clear and concise description of the problem

In my usecase we need to have pagination and navigation buttons on top and below a slider.
Currently we are able to have multiple backward-forward buttons(navigations). But when you want to include a second pagination the js wont run because it is expecting only one element.

Suggested solution

use querySelectorAll to determine pagination elements and from there do the js stuff for every one of them.
This way the slider should have support for multiple paginations

Alternative

No response

Additional context

Currently i am using swiper element using these options but I think this issue is related to the general package:
{
modules: [Pagination],
slidesPerView: 1,
spaceBetween: 15,
centeredSlides: true,
autoHeight: true,
pagination: {
el: '.post-list__bullets',
clickable: true,
renderBullet: function (index, className) {
return '

' + (index + 1) + "

";
},
},
navigation: {
nextEl: '.post-list__button--next',
prevEl: '.post-list__button--prev',
},
hashNavigation: {
watchState: true,
},
}

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[amityweb]

This is possible in an older version. Works for me swiper@8 then stops swiper@9

<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<div class="swiper-pagination-left"></div>
<div class="swiper-pagination-top"></div>

pagination: {
	el: '.swiper-pagination-left, .swiper-pagination-top',
	clickable: true,
	renderBullet: function (index, className)
	{
		var slideName = $('.swiper-container .slide-' + index).attr('data-slide-name');
		return '<div class="swiper-pagination-bullet">' + slideName + '</div>';
	}
},