touchDrag и mouseDrag owl-карусели при ресайзе
Проблема с owl-каруселями в разделах "Новинки" и "Хиты продаж" -
http://study.uitschool.com/fe-18-03/makarova/master/ На больших экранах функция перелистывания отключена и должна работать при отображении 3 элементов карусели, однако при ресайзе перелистывание не срабатывает. Единственный вариант - перезагрузить страницу - тогда элементы становятся draggable (однако и четыре элемента в этом случае также продолжают "перелистываться"). Описывается карусель следующим образом:
<script>
$('.owl-four').owlCarousel({
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1
},
426: {
items: 2
},
768: {
items: 3,
nav: false,
loop: true,
autoPlay: true,
touchDrag: true,
mouseDrag: true
},
1024: {
items: 4,
nav: false,
loop: false,
autoPlay: false,
touchDrag: false,
mouseDrag: false
}
}
})
Как обернуть ее правильно, какие варианты решения проблемы? |
matchMedia('(max-width: 1024px)').addListener(инициализация_карусели());
|
j0hnik,
:-? с инициализацией всё в порядке(строки 17-19, 25 - 27 работают), вопрос в том, почему часть параметров не срабатывает при resize(строки 17-19, 25 - 27 НЕ работают)? я ответа не знаю и решения тоже. |
рони,
ну тогда я хз итак должно все работать, без доп обертки |
Смотрел пример - вроде все работает как должно. До 3 включительно после ресайза карусель крутится, при 4 - не крутится.
Только почему-то нет 2 - меняется 1, 3, 4 В чем проблема? Смотрел в Хроме и ИЕ |
Dilettante_Pro,
смотрел, проблему наблюдал браузеры ie, Firefox, Google Chrome. |
рони,
Спасибо, понял проблему: Если идти от маленьких размеров к большим - то все работает, но и при 4 картинках остается драггабельность. Если же при запуске был большой размер (на 4 элемента) - то без обновления экрана драггабельность не появляется. т. е при ресайзе не срабатывают ни touchDrag: true, mouseDrag: true ни touchDrag: false, mouseDrag: false items срабатывает, loop срабатывает, а эти - нет. |
Dilettante_Pro,
да именно так , пробовал тригерить refresh не помогло, обработка событий не отключается и не подключается при изменении размеров окна. |
рони,
А в документации эти опции указаны как поддерживаемые в responsive. М.б. костыль с глушением событий touchstart, mousedown которые отвечают за Drag? |
Цитата:
|
Цитата:
|
рони,
почему нельзя использовать matchMedia? |
j0hnik,
я не понимаю вашего предложения с matchMedia |
рони,
matchMedia('(min-width: 1024px)').addListener(function(e){
if(e.matches) {
$('.owl-four').owlCarousel({
// опции для >1024px
});
}
else {
$('.owl-four').owlCarousel({
margin: 10,
responsiveClass: true,
// опции для <1024px
});
}
});
Или вы и дилетантом о чем то более высшем разговариваете :-? |
j0hnik,
мне сложно прокомментировать ваше предложение ... будем считать что мы Цитата:
|
| Часовой пояс GMT +3, время: 23:40. |