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