Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.05.2018, 18:57
Новичок на форуме
Отправить личное сообщение для antegria Посмотреть профиль Найти все сообщения от antegria
 
Регистрация: 05.05.2018
Сообщений: 9

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
                    }
                }
            })


Как обернуть ее правильно, какие варианты решения проблемы?
Ответить с цитированием
  #2 (permalink)  
Старый 10.05.2018, 12:59
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

matchMedia('(max-width: 1024px)').addListener(инициализация_карусели());
Ответить с цитированием
  #3 (permalink)  
Старый 10.05.2018, 14:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

j0hnik,
с инициализацией всё в порядке(строки 17-19, 25 - 27 работают), вопрос в том, почему часть параметров не срабатывает при resize(строки 17-19, 25 - 27 НЕ работают)? я ответа не знаю и решения тоже.

Последний раз редактировалось рони, 10.05.2018 в 14:15.
Ответить с цитированием
  #4 (permalink)  
Старый 10.05.2018, 14:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
ну тогда я хз итак должно все работать, без доп обертки
Ответить с цитированием
  #5 (permalink)  
Старый 10.05.2018, 14:58
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Смотрел пример - вроде все работает как должно. До 3 включительно после ресайза карусель крутится, при 4 - не крутится.
Только почему-то нет 2 - меняется 1, 3, 4
В чем проблема? Смотрел в Хроме и ИЕ
Ответить с цитированием
  #6 (permalink)  
Старый 10.05.2018, 15:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dilettante_Pro,
смотрел, проблему наблюдал
браузеры ie, Firefox, Google Chrome.
Ответить с цитированием
  #7 (permalink)  
Старый 10.05.2018, 16:05
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
Спасибо, понял проблему:

Если идти от маленьких размеров к большим - то все работает, но и при 4 картинках остается драггабельность.
Если же при запуске был большой размер (на 4 элемента) - то без обновления экрана драггабельность не появляется.

т. е при ресайзе не срабатывают ни
touchDrag: true,
mouseDrag: true

ни
touchDrag: false,
mouseDrag: false

items срабатывает, loop срабатывает, а эти - нет.
Ответить с цитированием
  #8 (permalink)  
Старый 10.05.2018, 17:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Dilettante_Pro,
да именно так , пробовал тригерить refresh не помогло, обработка событий не отключается и не подключается при изменении размеров окна.
Ответить с цитированием
  #9 (permalink)  
Старый 10.05.2018, 17:48
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

рони,
А в документации эти опции указаны как поддерживаемые в responsive.

М.б. костыль с глушением событий touchstart, mousedown которые отвечают за Drag?
Ответить с цитированием
  #10 (permalink)  
Старый 10.05.2018, 18:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

Сообщение от Dilettante_Pro
А в документации эти опции указаны как поддерживаемые в responsive.
при инициализации они из responsive, как раз и берутся
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
При ресайзе окна исчезает часть содержимого fenix_63 jQuery 2 08.11.2016 20:20
Странная ошибка в Crome загадочно исчезает при ресайзе окна Norm Iridium Общие вопросы Javascript 2 30.04.2014 19:16
зацикливание карусели owl Meanna jQuery 4 24.02.2014 14:59
прижатие футера к низу, но не поднятие его к верху при ресайзе? Kvark Элементы интерфейса 4 25.08.2013 11:30