// 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); } }