А можно как то подключать карусель Owl Carousel, если элементов больше n?

Question

[MFNIK]

Добрый день!
Подскажите пожалуйста, есть горизонтальное меню, очень длинные слова пунктов.
В длину вмещается только лишь при разрешении выше 1450px.
Заказчик предложил сделать что бы как карусель.
Вот реально это сделать на Owl Carousel при таких условиях:
1) Включать карусель, если элементов больше 5
2) Включать карусель, если разрешение меньше 1450px.

Если кто то сможет написать такой скрипт, готов поблагодарить!

Answer 1

[devilsD]

Тут карусель будет включаться если элементов больше 5ти. Если разрешение меньше 1450 то карусель будет включаться при наличии 3х элементов, соответсвенно на экране будет отображаться тоже 3 элемента.

$('.owl-carousel').owlCarousel({
    responsiveClass:true,
    responsive:{
        0:{
            items: 3,
        },
        1450:{
            items:  5,
        }
    }
})

Comments

[MFNIK]

Щас попробую в codepen`е организовать, посмотрим что получится.
Спасибо что откликнулись!

Answer 2

[MFNIK]

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

Comments

[devilsD]

Ну так смысл в том, что у вас прокрутка карусели появляется только при наличии более чем n элементов. Если у вас 5 элементов, то они будут отображаться без прокрутки.
Если вам принципиально именно активировать карусель при наличии n элементов, можете сделать так:

var elements = document.getElementsByClassName('owl-item');
if(elements.length > n){ $('.owl-carousel').owlCarousel({options}) }

[MFNIK]

devilsD, спасибо сейчас попробую.

[MFNIK]

devilsD, спасибо, все работает! Могу на телефон закинуть немного)