And pagination to div outside of swiper container in Angular 19 and Swiper 11

I have the swiper container working on the page with no issues, so its installed correctly and initialized.

However in this latest version of Swiper I cannot make the pagination appear in the normal fashion by assigning the pagination property to an HTML element in the config, as it specifies in the docs, like so -

in controller:

public swiper = new Swiper('.swiper', {
modules: [Pagination],
pagination: { el: '.swiper-pagination', clickable: true }
});


in template:

<swiper-container (swiperslidechange)="slideChange($event)">
<swiper-slide>1</swiper-slide>
<swiper-slide>2</swiper-slide>
<swiper-slide>3</swiper-slide>
</swiper-container

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


Assigning a separate configOptions object hasn't helped.

Continue reading...