Меняем эффекты прокрутки стандартного слайдера в opencart 2.3
1. Открываем /catalog/controller/module/slideshow.php
2. Ищем:
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');
Меняем на:
$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.js');
3. Ниже добавляем:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/animate.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');
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/animate.css');
4. Идем в папку /catalog/view/javascript/jquery/owl-carousel где открываем файл owl.carousel.js
5. Ищем:
support3d = (asSupport !== null && asSupport.length === 1);
Меняем на:
support3d = (asSupport !== null && asSupport.length >= 1 && asSupport.length <= 2);
6. Открываем /catalog/view/theme/ваша-тема/template/extension/module/slideshow.tpl
7. Ищем блок похожий на:
<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 1,
autoplay:true,
autoplaySpeed:1500,
autoplayHoverPause:true,
loop: true,
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
});
--></script>
8. Перед items: 1, вставляем:
animateOut: 'rollOut',
animateIn: 'rollIn',
9. Скачиваем animate.css:
Ищи внизу под выбором стиля анимации Download Animate.css
10. Вставляем через FTP animate.css сюда:
/catalog/view/javascript/jquery/owl-carousel/
11. Переходим в /catalog/view/theme/ваша-тема/template/extension/module/slideshow.tpl
12. Ищем:
animateOut: 'rollOut',
animateIn: 'rollIn',
Меняем rollOut и rollIn на любую другую заставку.
Названия эффектов можно посмотреть здесь:
https://daneden.github.io/animate.css/
Там же можно посмотреть и как он выглядит и как называется.
Версия в которой я настраивал: opencart 2.3.0.2.2
Сначала настраивал по аналогии как здесь:
https://asterial.ru/saytostroenie/effekty-slaydera-owl-carousel-v-opencart-i-ocstore-2102-chto-delat-esli-slayder-ne
Но по ходу были небольшие доработки.
Теперь давайте подробнее объясню, что к чему.
В пункте 3 я добавил строчку $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/animate.css'); потому что в файле …owl.transitions.css'); прописаны не все эффекты и добавление одной этой строчки не достаточно. Там прописано по моему 4 или 5 эффектов. При подключении библиотек … animate.css'); все эффекты работали как положено. Файл animate.css скачивал с сайта https://owlcarousel2.github.io/OwlCarousel2/demos/animate.html, см. пункт 9. Там ниже под пунктом 1 ссылка на скачку.
Далее расположение файла slideshow.tpl в opencart 2.3.0.2.2 лежит немного по другому пути. См. пункт 6.
Строки animateOut и animateIn в файле slideshow.tpl как раз и отвечают за анимацию прокрутки.
animateOut – означает каким эффектом будет убираться изображение.
animateIn – каким эффектом будет появляться следующее за ним изображение и так по кругу.
Кстати если не заморачиваться и в файле slideshow.tpl перед items: 1, вставить animateOut: 'fadeOut', то у вас уже должна смениться анимация прокрутки так как этот эффект присутствует по умолчанию в библиотеке owl.transitions.css
Надеюсь новичкам данный мануал будет кстати.
