Customizing the Swiper navigation icons

[Ali-Hussein-dev]

I am trying to custom the arrow icons in the navigation module but the only way I could see, to achieve that is through using classes "swiper-button-next/prev". I couldn't do much with it like rendering custom arrows. am I correct?

[amoknira]

I did so, don't know another way. And with !important tag ofc. If someone know another solution, would be cool to see it.

[rizqykhairani123]

I am trying to custom the arrow icons in the navigation module but the only way I could see, to achieve that is through using classes "swiper-button-next/prev". I couldn't do much with it like rendering custom arrows. am I correct?

.swiper-button-prev {
background-image: url(/assets/icons/arrow-circle-left.svg) !important;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}

.swiper-button-next {
background-image: url(/assets/icons/arrow-circle-right.svg) !important;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}

.swiper-button-next::after {
display: none;
}

.swiper-button-prev::after {
display: none;
}

[Excelsior2021]

@rizqykhairani123 thank you!

[oknim]

doesn't work for me...

[muamarzidan]

doesn't work for me...

use this bro

1. setup the container or etc to wrap the navigation
   

2. then just set with css

.swiper-button-prev::after {
background-image: url('src/assets/lefto.svg');
background-repeat: no-repeat;
width: 100px;
height: 100px;
color: #FFFFFF00;
}

.swiper-button-prev.swiper-button-disabled::after {
background-image: url('src/assets/leftoDisabled.svg') !important;
background-repeat: no-repeat !important;
width: 100px !important;
height: 100px !important;
color: #FFFFFF00 !important;
}

[oluwatimilehinawoniyi]

Please, after this while, has anyone found a solution to this?
Is the icon provided by Swiper a font? svg? what format is it exactly?

[rizqykhairani123]

.swiper-button-prev {
background-image: url(/assets/icons/arrow-circle-left.svg) !important;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}

.swiper-button-next {
background-image: url(/assets/icons/arrow-circle-right.svg) !important;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}

.swiper-button-next::after {
display: none;
}

.swiper-button-prev::after {
display: none;
}

[rizqykhairani123]

I am trying to custom the arrow icons in the navigation module but the only way I could see, to achieve that is through using classes "swiper-button-next/prev". I couldn't do much with it like rendering custom arrows. am I correct?

.swiper-button-prev {
background-image: url(/assets/icons/arrow-circle-left.svg) !important;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}

.swiper-button-next {
background-image: url(/assets/icons/arrow-circle-right.svg) !important;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}

.swiper-button-next::after {
display: none;
}

.swiper-button-prev::after {
display: none;
}

[SamihaHussein2]

thank you so much for your response it has been 2 days trying to fix this

[jpierson-at-riis]

I'm looking to something similar but I want to customize more details than just the icon. Instead I'd like some text with an icon so I'm looking for the ability to specify some custom HTML that would make up the element. I'm looking into how this would be done without reinventing too much of the wheel when using the element approach. This was possible in the older jQuery based version that I'm trying to upgrade. I'll try to update here if I find another way to customize the navigation buttons.