DEV Community

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

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...
Collapse
 
marcosriani profile image
Marcos Cabrini Riani dos Reis

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.

Collapse
 
melaskar profile image
melaskar

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

Collapse
 
arruday profile image
Felipe Arruda

thank uuuuuu

Collapse
 
forestdean profile image
John Walton

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.

Collapse
 
ivadyhabimana profile image
Ivad Yves HABIMANA

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...

Collapse
 
drprime01 profile image
DrPrime01

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

Collapse
 
ivadyhabimana profile image
Ivad Yves HABIMANA

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

Collapse
 
artemshchirov profile image
Artem Shchirov • 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>
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
ivadyhabimana profile image
Ivad Yves HABIMANA

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?

Thread Thread
 
ivadyhabimana profile image
Ivad Yves HABIMANA
Collapse
 
stevesimms profile image
Steven Simms

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

Collapse
 
guipaiva profile image
Guilherme Paiva

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!

Collapse
 
guipaiva profile image
Guilherme Paiva

Nevermind, I got it hahah

const params = {
    pagination: {
      clickable: true,
    },
    injectStyles:
Enter fullscreen mode Exit fullscreen mode