Эффекты слайдера Owl Carousel в Opencart и OcStore


По сравнению с версиями 1.5 Opencart и OcStore получили ряд улучшений и изменений. Тем не менее, к этим новшествам надо еще и приспособиться, особенно тем, кто привык работать с более ранними версиями. Обновления не обошли стороной и всеми любимый модуль слайдера, теперь вместо старого Nivo Silder используется Owl Carousel, поэтому и настройки будут отличаться.

Подключение кода слайдера, как и прежде, осуществляется в файле /catalog/view/theme/ваша-тема/template/module/slideshow.tpl. Стоит сказать, что для карусели используется этот же слайдер, поэтому эффекты и параметры будут похожими, только редактируются они в файле /catalog/view/theme/ваша-тема/template/module/carousel.tpl

В файле мы видим следующий код:

<script type="text/javascript"><!--

$('#slideshow<?php echo $module; ?>').owlCarousel({

    items: 6,

    autoPlay: 3000,

    singleItem: true,

    navigation: true,

    navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],

    pagination: true

});

--></script>

Здесь можно настроить поведение и эффекты слайдера. Если обратиться к документации Owl Carousel, то сразу все станет ясно:

items - определяет количество элементов, которые будут отображаться одновременно на экране (несколько изображений подряд, как в старой карусели)

autoPlay - задает интервал времени в милисекундах, через который будет сменяться изображение в слайдере

singleItem - параметр, с помощью которого карусель превращается в слайдер, т.е. отображает только одно большое изображение

navigation - отображение стрелок влево-вправо

navigationText - текст или изображение на стрелках навигации

pagination - отображение постраничной навигации, т.е. точек внизу слайдера, которые показывают текущее положение

Кроме настроек по-умолчанию есть и другие полезные опции.

Например, можно включить остановку слайдера при наведении курсора мышки:

stopOnHover: true,

Не забывайте ставить запятую в конце каждой опции. Также можно настроить скорость анимации слайдера, то есть длительность эффекта смены изображений:

slideSpeed: 400,

И одна из самых интересных и полезных опций - настройка эффекта слайдера, т.е. анимации с которой сменяются изображения:

transitionStyle: "backSlide",

Доступно 4 эффекта анимации: "fade", "backSlide", "goDown" и "scaleUp".

Но после указания типа анимации, многие сталкиваются с тем, что слайдер вообще перестает работать, либо изображения сменяются без какого-либо эффекта. Дело в том, что в текущей версии 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 комментариев / Написать комментарий

Написать комментарий

Внимание: HTML не поддерживается! Используйте обычный текст!
    Бесполезно           Полезно
Captcha

Подпишитесь

Рассылаем только значимую информацию