How to customize the syles of pagination and navigation [VueJS 3]

[jameswong3388]

<swiper
            class="my-20 h-32 w-full max-w-7xl select-none"
            :modules="modules"
            :slides-per-view="5"
            :space-between="50"
            :pagination="{
                clickable: true,
                dynamicBullets: true,
            }"
            :grabCursor="true"
            :breakpoints="{
                320: { slidesPerView: 2 },
                768: { slidesPerView: 3 },
                1024: { slidesPerView: 4 },
                1280: { slidesPerView: 5 },
            }"
            :loop="true"
            :autoplay="{
                delay: 1500,
                disableOnInteraction: false,
            }"
        >

[Arhell]

You can do this with custom classes, put a custom class on the slider wrapper and use inheritance to change everything in css as you see fit.

or use api https://swiperjs.com/swiper-api#param-pagination

https://swiperjs.com/swiper-api#param-navigation

and do the same as I wrote above, here not on the wrapper, but on your own classes