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

Question

[Vitaly Max]

подключил слайдер к странице, со слайдами и контейнером разобрался, подключил кнопки переключения слайдов,

navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev',
		},

добавил эти стили к своим созданным кнопкам, слайды переключает, но поверх моих кнопок еще и стандартные.

Вопрос как убрать стандартные??

Comments

[FeST1VaL]

Берешь и скрываешь через стили например... и вешаешь на свои кнопки события на переключение слайдов.

mySwiper.navigation.nextEl	HTMLElement of "next" navigation button
mySwiper.navigation.prevEl	HTMLElement of "previous" navigation button

А вообще помоему если их убрать из разметки, то они и не будут активными... и ошибок вроде не будет... тк в документацию которую скорее всего вам лень читать написано так.

<!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

Answer 1

[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...

Comments

[Дмитрий]

Спасибо, вариант с dev.to работает отлично.

Answer 2

[Сергей Карвасарный]

скорее всего стили не удалил тех кнопок, ты может повесил на класс, а у них на :after :before стили стрелок. Как минимум бы неплохо было увидеть это в живую.

Comments

[Vitaly Max]

Сергей Карвасарный прописал доп стили для классов кнопок, помогло, но решение конечно не оптимальное

[Сергей Карвасарный]

RaggaMaffin, а как по другому, тебе все равно нужно найти старые стили и скрыть их или изменить или лезть в код сайдера и подкидывать свои переменные, а это тоже я тебе скажу не круто, потому, что потом надо будет библиотеку обновить к примеру и все затрется, проще стили скрыть и сделать свои.

Answer 3

[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;
}

Comments

[Никитос Албанов]

где вы скачали css файл свайпера? нигде не нашел..

Answer 4

[HelliCoppter]

Есть решение гораздо проще: назначаешь своим созданным кнопкам стандартные классы свайпера swiper-button-prev и swiper-button-next. Я садил на svg, два действия и все работает как надо.