How to change svg icon of next, prev button when using Swiper Element (WebComponent)?

[jony1993]

Hi there,

Is there any easy way of changing the svg icon when using the Swiper Element (Webcomponent)?

[Koreanderson]

@jony1993

Probably the easiest way is to build your own next and prev elements with your custom styles attached to them.

Then on the swiper element you can specify your custom next and prev elements with css selectors on the swiper container attributes like so:

<swiper-container
  navigation-next-el=".custom-next-button"
  navigation-prev-el=".custom-prev-button"
>
...
</swiper-container>

<div class="custom-prev-button"><svg>...</svg></div>
<div class="custom-prev-button"><svg>...</svg></div>

https://swiperjs.com/swiper-api#param-navigation
https://swiperjs.com/element#parameters-as-attributes

[james0r]

This should probably go in the docs for the element. The Swiper Element is cool but you see "As easy as..." on the homepage and then realize it really ain't that easy at all.

[vincentreynaud]

agreed 100%!

[bestquangminh]

it works perfectly ! thank you

[polopolur]

And if you would still like to keep some styles? For example, the location of the buttons relative to the slider

[2gacem7]

Hi, very important, don't change the name of the classes : '.swiper-button-next',
and '.swiper-button-prev' when you do it.

[labristow]

@Koreanderson answer is great but I was using React so I had to do very little tweak.

1. Note that is synonymous to in ReactJs.
2. Instead of directly changing the default navigation class name inside component props, you will need to do so inside the navigation property.

const sliderOptions = {
navigation: {
nextEl: ".nextButton",
prevEl: ".prevButton",
},
}
return (
<React.Fragment>

<SVGS.ArrowLeftIcon />

<Swiper {...sliderOptions}>
// SwiperSlides elements


<SVGS.ArrowRightIcon />

</React.Fragment>
)