RaggaMaffin
@RaggaMaffin

Как скрыть стандартные стрелки в swiper и заставить работать свои стрелки?

подключил слайдер к странице, со слайдами и контейнером разобрался, подключил кнопки переключения слайдов,
navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},

добавил эти стили к своим созданным кнопкам, слайды переключает, но поверх моих кнопок еще и стандартные.
5d1c584ce1b54088454706.png
Вопрос как убрать стандартные??
  • Вопрос задан
  • 8608 просмотров
Пригласить эксперта
Ответы на вопрос 4
@illife
У меня получилось. Вообщем, очень просто. Вешаешь картинку на стрелку фоном, например:
.main__swiper_left {
background-image: url("../img_2/main__swiper_left.png");
width: 58px;
height: 58px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
А потом добавляешь:
.main__swiper_left::after {
display: none;
}
Не знаю - как это работает, но это работает). Источник: https://dev.to/timo_ernst/how-to-customize-prev-ne...
Ответ написан
скорее всего стили не удалил тех кнопок, ты может повесил на класс, а у них на :after :before стили стрелок. Как минимум бы неплохо было увидеть это в живую.
Ответ написан
@petrov6827
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;
}
Ответ написан
@HelliCoppter
Есть решение гораздо проще: назначаешь своим созданным кнопкам стандартные классы свайпера swiper-button-prev и swiper-button-next. Я садил на svg, два действия и все работает как надо.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы