Search the Community

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