DEV Community

Customizing Swiper.js prev/next arrow buttons and pagination bullets in React

Ivad Yves HABIMANA on April 08, 2023

I was working on an image carousel using the Swiper.js library in a React project and I had a hard time customizing the navigation buttons and pagi...

Read full post

Marcos Cabrini Riani dos Reis • May 10 '23

Thank you very much for this post, it really helped me as the current changes on Swiper js are not very documented out there.

Thanks a lot.

melaskar • Jun 6 '23

Excellent explanation, I was looking for just this and I could not get documentation to explain it. Thanks a lot

Felipe Arruda • Jun 21 '23

thank uuuuuu

John Walton • Jul 31 '23

This has been really helpful. I was hoping to recreate an old jQuery carousel I set up with Malsup Cycle2. It was possible to set up custom controls outside of the slideshow container. Is this possible with Slider or have I reached a dead-end?

I tried using the swiper-button class on external button elements but there was no success.

Ivad Yves HABIMANA • Aug 1 '23

Hi @forestdean I think that's possible. You can actually control the slider programmatically by using the swiper.slideNext() and slider.slidePrev() and many other methods.
Here is the link to the the methods in the Swiper API swiperjs.com/swiper-api#method-swi...

DrPrime01 • Jul 23 '23

Hello, nice article
However, I'm getting swiperContainer.initialize is not a function. How did you manage to escape that?

Ivad Yves HABIMANA • Jul 26 '23

I'm not sure but I think that following the mentioned in the article steps 100% should get everything to work. If it's not working for you, can you try to log the swiperContainer and see what object do you have in your case

Artem Shchirov • Jul 26 '23 • Edited

Hi! Thanks for the article. However, I am also stuck with this error in my Next.js TypeScript project: "swiperContainer.initialize is not a function."

When I use console.log(swiperContainer), it returns an HTML element.

<div class="swiper-slide" role="group" aria-label="3 / 3" style="width: 1160px; opacity: 0; transform: translate3d(-2320px, 0px, 0px);">
<img alt="Slide" loading="lazy" width="2731" height="4096" decoding="async" data-nimg="1" style="color:transparent" srcset="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimg_4.e3bfeac7.jpg&amp;w=3840&amp;q=75 1x" src="/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fimg_4.e3bfeac7.jpg&amp;w=3840&amp;q=75">
</div>

Ivad Yves HABIMANA • Jul 27 '23

I just confirmed and everything still works even using next js I have recreated it in this code sandbox here codesandbox.io/p/sandbox/intellige...

Can you confirm that you are following all the steps?

Ivad Yves HABIMANA • Jul 27 '23

@artemshchirov @drprime01

Steven Simms • Nov 17 '23

I have to thank you for this.I was able to adjust this for my Angular appwith minimal effort.
Thansk Again!!!

Guilherme Paiva • Nov 23 '23

Hi! First of all thank you so much for this post, helped me a lot!

I'm trying to customize my pagination to be clickable. How would I do that using the params object?

Thanks again!

Guilherme Paiva • Nov 23 '23

Nevermind, I got it hahah

const params = {
    pagination: {
      clickable: true,
    },
    injectStyles: