В опенкарт 2-й версии, для работы модулей "Баннер", "Карусель", "Слайдшоу" (это из стандартных) используется скрипт Owl Carousel, первой версии. Скрипт хороший, но кое-чего ему не хватает, в основном - бесконечной прокрутки.
Самый простой выход - обновить карусель до более свежей версии. Правки при этом предстоят небольшие, после изменений получим не только зацикленную прокрутку, но и более удобную настройку адаптивности (хотя здесь кому как, но хуже не станет), ну и плюс еще несколько новых опций, все их можно найти в документации скрипта.
Для начала составлю небольой список, что нужно будет сделать:
- Скачать свежую версию Owl Carousel
- Заменить файлы на хостинге
- Внести правки в контроллеры модулей (не обязательно, кроме banner)
- Правки в .tpl модулей
- Изменения в CSS
Вот и все, можно приступать.
Обновление скрипта
Для начала скачиваем скрипт, сделать это можно с сайта Owl Carousel - вот отсюда
В скачанном архиве нам нужны будут файлы:
- dist/owl.carousel.js
- dist/owl.carousel.min.js
- dist/assets - можно взять все содержимое папки
Все эти файлы копируем с заменой в catalog/view/javascript/jquery/owl-carousel
После этой замены скрипт обновлен, все работает, но пока не правильно.
Модификация контроллеров
Для начала рекомендую внести небольшие правки в контроллеры модулей, это не обязательно, но так будет лучше. Изначально подключается не сжатая таблица стилей - owl.carousel.css, заменим на min версию, это ускорит загрузку страниц. Нужны будут следующие файлы (здесь и далее только для стандартных модулей, по остальным делаем по аналогии):
- catalog/controller/extension/module/banner.php
- catalog/controller/extension/module/carousel.php
- catalog/controller/extension/module/slideshow.php
Здесь находим:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
Меняем на:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.css');
Еще в banner.php нужно удалить строку:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
С контроллерами все.
Изменения в шаблонах
Нужно будет изменить код вызова карусели, т.к. изменились все (или почти) параметры. Рекомендую ознакомиться с доступными опциями - здесь, возможно найдется что то нужное.
Понадобятся файлы:
- catalog/view/theme/default/template/extension/module/banner.tpl
- catalog/view/theme/default/template/extension/module/carousel.tpl
- catalog/view/theme/default/template/extension/module/slideshow.tpl
Для каждого модуля будет старый код и новый, так хорошо будут видны изменения.
slideshow.tpl
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
Меняем на такой:
items: 1,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
singleItem: true,
nav: true,
navText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
dots: true
carousel.tpl
items: 6,
autoPlay: 3000,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: true
Меняем на:
items: 6,
loop: true,
autoplay: true,
autoplayTimeout: 3000,
nav: true,
navText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
dots: true
banner.tpl
items: 6,
autoPlay: 3000,
singleItem: true,
navigation: false,
pagination: false,
transitionStyle: 'fade'
Меняем на:
items: 1,
autoplay: true,
autoplayTimeout: 3000,
autoplayHoverPause: true,
nav: false,
dots: false,
animateOut: 'fadeOut'
Изменения в CSS
Теперь нужно добавить стили, для нормального отображения навигации и не только. Правки будут показаны на примере CSS стандартного шаблона:
catalog/view/theme/default/stylesheet/stylesheet.css
В самый конец файла добавлю:
.owl-carousel .owl-nav {width: 100%;position: absolute;top: 50%;line-height: 45px;}
.owl-carousel .owl-nav [class*='owl-'] {top: 50%;color: rgba(0,0,0,0.8);text-shadow: 1px 1px 0 rgba(255,255,255,0.3);transition: all .3s ease;position: absolute;opacity: 0;width: 27px;height: 44px;margin-top: -22px;}
.owl-carousel .owl-nav .disabled {opacity: 0;cursor: default;}
.owl-carousel .owl-nav i {font-size: 44px;line-height: 1em;}
.owl-carousel .owl-nav .owl-prev {left: -10px;}
.owl-carousel .owl-nav .owl-next {right: -10px;}
.owl-carousel:hover .owl-nav [class*='owl-'] {opacity: 0.7}
.owl-carousel:hover .owl-nav [class*='owl-']:hover {opacity: 1}
.owl-carousel:hover .owl-nav .owl-prev {left: 10px;}
.owl-carousel:hover .owl-nav .owl-next {right: 10px;}
.owl-carousel .owl-dots {text-align: center;-webkit-tap-highlight-color: transparent; }
.owl-carousel .owl-dots .owl-dot {display: inline-block;zoom: 1;*display: inline;}
.owl-carousel .owl-dots .owl-dot span {width: 10px;height: 10px;margin: 5px 7px;background: #D6D6D6;display: block;-webkit-backface-visibility: visible;transition: opacity 200ms ease;border-radius: 30px;}
.owl-carousel .owl-dots .owl-dot.active span, .owl-carousel .owl-dots .owl-dot:hover span {background: #869791;}
Скажем так, ставил, все работает, но…
Мне не понравилось — единственный плюс увидел в работе карксели по кругу, но само передвижение картинок резкое, дерганное.
Банер также не айс.
Установил старую версию, как то получше смотрится.
Может нужно больше правок под шаблон, если визуально не так… с шаблоном по-умолчанию там не то что бы много отличий (вроде все так же)
Шаблон стандарт, правки минимальны. Но визуально, при новом скрипте карусель перемещает картинку резко, со старым она перемещается более плавно, не раздражает глаз.
Скорость анимации можно опциями контролировать. Например попробовать:
Еще есть navSpeed, dotsSpeed, dragEndSpeed, если нужно отдельно настроить.
На одиночных слайдах хорошо смотрится если указать эффект fadeOut: