Меняем эффекты прокрутки синдартного слайгдера в 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
Нагдеюсь новичкам данный мануал бугдет ксити.