swiper slider использует свои шрифты на кнопках
font-family: 'swiper-icons';
по дефолту на каждую кнопку вешается иконка: content: 'next' и content: 'prev',
1) я подключал стили свайпера вручную, скачав файл .css
2) в нем убрал next и prev
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
//content: 'next';
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
// content: 'next';
}
(просто закомментил)
3)
и дописал таким вот образом свои кнопки:
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
// opacity: 0;
background: url("
data:image/svg+xml,%3Csvg width='23' height='40' viewBox='0 0 23 40' fill='none' xmlns='
www.w3.org/2000/svg'%3E%3Cline x1='1.93934' y1='38.9393' x2='21.9393' y2='18.9393' stroke='black' stroke-width='3'/%3E%3Cline y1='-1.5' x2='28.2843' y2='-1.5' transform='matrix(0.707107 0.707107 0.707107 -0.707107 3 0)' stroke='black' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat center;
width: 24px;
height: 41px;
background-size: 23px 40px;
overflow: hidden;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
background: url("
data:image/svg+xml,%3Csvg width='23' height='40' viewBox='0 0 23 40' fill='none' xmlns='
www.w3.org/2000/svg'%3E%3Cline x1='1.93934' y1='38.9393' x2='21.9393' y2='18.9393' stroke='black' stroke-width='3'/%3E%3Cline y1='-1.5' x2='28.2843' y2='-1.5' transform='matrix(0.707107 0.707107 0.707107 -0.707107 3 0)' stroke='black' stroke-width='3'/%3E%3C/svg%3E%0A") no-repeat center;
width: 24px;
height: 41px;
background-size: 23px 40px;
overflow: hidden;
}