Перейти к содержанию
ArtemPitov

OWL Carousel - танцы с бубнами

Рекомендуемые сообщения

Доброго времени суток ! 

 

Уже как час борюсь стандартным OWL, суть какова -  нужно поменять анимацию слайдера, прочитал мануал добавил в скрипт transitionStyle : "fade" как на оф. сайте в демке, не помогла, анимация не меняется, в чем может быть проблема  ?  Спасибо !

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вы побывали другой вариант прописывать?

 

"fade", "backSlide", goDown and scaleUp.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

пробовал, такая же не работает

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

owl.transitions.css

 

у вас он есть ,вы его подключили?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

он есть, в самом контролере он не подключен, подключил $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css'); , не помогло

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Но после указания типа анимации, многие сталкиваются с тем, что слайдер вообще перестает работать, либо изображения сменяются без какого-либо эффекта. Дело в том, что в текущей версии Opencart и OcStore не подключены все стили слайдера, и есть небольшой баг в скрипте слайдера.

Первым делом надо подключить стили анимаций слайдера. Это делается в файлах /catalog/controller/module/slideshow.php и /catalog/controller/module/carousel.php соответственно. Здесь надо дописать строчку

        $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');

после 

        $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');

Также в строке  $this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');  удаляем слово "min", так как следующим шагом будет редактирование и подключение файла полного скрипта слайдера. Получаем в итоге три строки такого вида:

        $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
        $this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.js');
        $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');

Сохраняем файл и идем в папку /catalog/view/javascript/jquery/owl-carousel где открываем файл owl.carousel.js, в котором ищем строку:

support3d = (asSupport !== null && asSupport.length === 1);

и меняем ее на:

support3d = (asSupport !== null && asSupport.length >= 1 && asSupport.length <= 2);

Эта строка отвечает за поддержку слайдера различными браузерами, в том числе и Internet Explorer. В измененной версии поддержка будет более точной, поэтому слайдер сможет использовать все свои эффекты в современных браузерах. Сохраняем отредактированный файл, чистим кэш браузера (Ctrl+F5 или Ctrl+Shift+R) и радуемся новым эффектам слайдера. В документации говорится, что можно написать и свои эффекты для слайдера, поэтому тут можно и еще поэксперементировать.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.