Как убрать стрели Slick Slider на адаптиве?

Question

[Владислав]

Добрый день.
Использую кастомные стрелки для слайдера:

prevArrow: ".arrow-prev",
nextArrow: ".arrow-next",
responsive: [
	{
	  breakpoint: 768,
	  settings: {  }
	}
]

В этом случае параметр arrow вообще не влияет никак на работу слайдера.
Мне нужно при разрешении меньше 768 убрать стрелки.

breakpoint: 768,
	  settings: { arrows: false }

- естесственно не помогает.
Как это сделать?

Comments

[andrash_]

Попробуй сначала в главных настройках задать arrows: true, затем в settings - arrows: false. Также у тебя остаются заданные настройки ".arrow-prev", и nextArrow: ".arrow-next".

[Владислав]

Не помогает.

Answer 1

[z_u_q]

А какая версия плагина у Вас? С последней версией всё отлично работает.

Ссылка на пример

Comments

[Владислав]

Версия 1.8.1.
Что именно работает?

[z_u_q]

В версии 1.8.1 нет инлайновых стилей в у кнопок вперед\назад, поэтому их можно спокойно скрывать без !important в стилях, см мой пример выше.

[Владислав]

Я говорил, что скрипт прописывает стрелкам style="display: block;", который перекрывает любые мои стили.

[z_u_q]

Смотрите мой пример. Там нет инлайновых стилей.

[Владислав]

У меня есть:

[z_u_q]

Владислав, как вы задаёте кастомные стрелочки? Лучше выложите пример в песочницу. Так будет проще понять, что у вас не так.

Стрелки нужно задавать именно в таком виде:

prevArrow:"<span type='button' class='arrow arrow_prev'>Назад</span>",
nextArrow:"<span type='button' class='arrow arrow_next'>Вперед</span>",

А у вас возможно просто прописывается класс текущим стрелкам.

prevArrow: ".arrow-prev",
nextArrow: ".arrow-next",

Из-за этого стрелки у вас не кастомные. А дефолтные => им ставится инлайновый стиль. Соответственно нужно задать какой-то span\div, который будет стрелкой и скрывать его в адаптиве.

[Владислав]

Не получится, тут админка с какой-то странной структурой и код там тоже странный. Видимо, из-за этого такая проблема только у меня. Сделаю через !important, куда деваться...
Спасибо.

Answer 2

[Антон]

@media (max-width:768px) {
.arrow-prev, .arrow-next { display: none }
}

Answer 3

[bbquite]

Почему бы просто не поставить display none в медиазапросе?

Answer 4

[RedBubble]

media (max-width: 768px) {
.arrow-prev, .arrow-next {
display: none;
}
}

Answer 5

[Владислав]

Через media не помогает, т.к. скрипт прописывает стрелкам style="display: block;", который перекрывает любые мои стили. Если только через !important, но это как-то...