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.