Overwriting Swiper navigation
Thu Dec 15 2022 13:13:22 GMT+0000 (Coordinated Universal Time)
Saved by
@jen_magpantay
#javascript
#react.js
// set ne style in the global style sheet
.swiper-button-prev,
.swiper-button-next {
width: 20px;
height: 20px;
aspect-ratio: 1 / 1;
padding: 25px;
//background-color: rgba($black, 0.5);
border: none;
border-radius: 50px;
top: unset !important;
bottom: -80px;
outline: none;
cursor: pointer;
}
.swiper-button-next {
right: unset !important;
margin-left: calc(60px + $half-gap);
background-image: url("../public/arrows-16px-1-tail-right.svg");
background-repeat: no-repeat;
background-position: center;
&::after {
display: none;
}
&.white {
background-color: rgba($white, 0.5);
}
&.black {
background-color: rgba($black, 0.5);
}
}
.swiper-button-prev {
left: 0 !important;
background-image: url("../public/arrows-16px-1-tail-right.svg");
background-repeat: no-repeat;
background-position: center;
transform: rotate(180deg);
&::after {
display: none;
}
&.white {
background-color: rgba($white, 0.5);
}
&.black {
background-color: rgba($black, 0.5);
}
}
content_copyCOPY
https://dev.to/timo_ernst/how-to-customize-prev-next-buttons-in-react-swiper-js-4lki
Comments