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

Question

[Екатерина Пушкина]

Привет, всем!
Подключила swiper.js, но не могу изменить стили стрелок. Меняется только background-color и цвет самой стрелки. Стили применяю к классам .swiper-button-prev, .swiper-button-next, также дополнительно присваивала свои, ничего не работает. Пытаюсь изменить размер стрелки, в css пишу font-size: 20px; но стрелки остаются такими же, а в инспекторе эта строка зачёркнута. Тоже самое и с отступами, по умолчанию стоит right: 10px; и ничего с этим не сделать. Помогите пожалуйста!

Comments

[Spaceoddity]

Грузите код в какую-нибудь песочницу. Как вы себе представляете помощь - на пальцах объяснять?

[Вадим]

А может Вам просто сверстать нужные вам кнопки навигации, задать им нужные стили и просто указать свайперу, чтобы он использовал их?

Answer 1

[poproboval]

1) Используйте свои кнопки

new Swiper('.swiper',{
                navigation: {
                        nextEl: '.custom-next',
                        prevEl: '.custom-prev',
                },
            });

Задайте классы custom-next, custom-prev своим кнопкам

2) Можно поменять стандартные иконки через css, в .swiper-button-next:after и .swiper-button-prev:after, задайте своё изображение или текст. По умолчанию swiper использует свой иконочный шрифт. Если хотите просто изменить размер иконки в укажите font-size: значение !important;
!important нужен чтобы применился именно ваш font-size а не стандартный

Ваша ошибка в том что вместо .swiper-button-prev/next:after вы в css используете просто .swiper-button-prev/next

Answer 2

[Александр Васильев]

Добрый день.

Вы можете поступить грубо, но эффективно.

var arrowSlider =
  '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">' +
  '<path d="M25 20.5019C25 20.8242 24.8824 21.1173 24.6472 21.3517L17.003 28.6777C16.7678 28.8828 16.4738 29 16.1798 29C15.8564 29 15.5624 28.8828 15.3272 28.6483C14.8862 28.1795 14.8861 27.4469 15.3566 26.978L22.1187 20.5019L15.3566 14.0257C14.8861 13.5862 14.8862 12.8243 15.3272 12.3554C15.7682 11.8865 16.5326 11.8865 17.003 12.3261L24.6472 19.6521C24.8824 19.8865 25 20.1795 25 20.5019Z" fill="#A7A7A7"/>' +
  '</svg>'


$('.exapmle__box').owlCarousel({
 ...
  navText: [arrowSlider, arrowSlider],
...
  
})

Answer 3

[imaglich]

Достаточно следующего, я проверил:
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
content: '';
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-prev:after {
content: '';
}