@lagudal

Как лучше всего «умно» скрыть/показать навигацию owl carousel?

Речь об известном плагине - вот этой карусели
В моем случае, хотя это не очень важно, карусель используется в magento2 шопе, выводятся те или иные товары, в общем, продукт-карусель.
В зависимости он ситуации, карусель может выводить как один-два-три товара, так и гораздо больше. Довольно часто - меньше 5. Настроен показ 5 видимых на экране слайдов на десктопе больше 1200px, затем соотв-но уменьшение видимых слайдов в зависимости от размера экрана, до 1 слайда в мобильном (телефон) разрешении.
Так вот, хочется сделать так, чтобы стрелки навигации (класс "owl-nav") появлялись или становились видимыми только тогда, когда есть куда навигировать, т.е. когда есть невидимые слайды. Например, если в текущей карусели ровно 5 слайдов, то показать стрелки только для тех девайсов, где помещается меньше 5 слайдов. А если в карусели 2 слайда, то показать стрелки только для девайсов где помещается всего один слайд.
Писать дополнительные стили для каждой карусели муторно и вариант так себе, подумал, может есть что уже готовое, плагин ведь достаточно популярен.
пс. Точки (owl-dots) не важны сейчас, только стрелки.
  • Вопрос задан
  • 258 просмотров
Решения вопроса 1
Symphony
@Symphony Куратор тега CSS
Owl-carousel по умолчанию так и работает.
jsfiddle.net/Symphony/poyLzwam
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы