Меняем эффекты прокрутки стандартного слайдера в opencart 2.3

[ghost298]

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

Надеюсь новичкам данный мануал будет кстати.

[svi00]

Здравствуйте.

Что то ничего не изменилось после соответствующих правок. Версия ocStore 2.3.0.2.3

В указанной статье самые первые правки указаны в двух файлах slideshow.php и carousel.php (не помогает) - Вы указываете только в одном файле.

Кэш чистил, Модули в менеджере обновлял.

Возможно для моего движка другие правки должны быть?

[Pavel666]

В 30.12.2017 в 12:52, svi00 сказал:

Здравствуйте.

Что то ничего не изменилось после соответствующих правок. Версия ocStore 2.3.0.2.3

В указанной статье самые первые правки указаны в двух файлах slideshow.php и carousel.php (не помогает) - Вы указываете только в одном файле.

Кэш чистил, Модули в менеджере обновлял.

Возможно для моего движка другие правки должны быть?

Актуален вопрос? Делюсь опытом) тоже 2.3 тоже не работало, пропустил шаг 5, и все замечательно заработало, еу точнее заработали только дефолтные анимации

Змінено 18 лютого 2018 користувачем Pavel666

[ghost298]

В 18.02.2018 в 23:44, Pavel666 сказал:

Актуален вопрос? Делюсь опытом) тоже 2.3 тоже не работало, пропустил шаг 5, и все замечательно заработало, еу точнее заработали только дефолтные анимации

Вообще странно. У меня все нормально работает. 

[webden]

Для OcStore 2.3.0.2.3 по этой инструкции не заработало. Скачал последнюю версию слайдера с оффсайта и в файле /catalog/view/theme/ваша-тема/template/extension/module/slideshow.tpl изменил опции согласно документации к этой версии, так как они отличаются от приведённых выше. Примерно так:

<script type="text/javascript"><!--
  $('#slideshow<?php echo $module; ?>').owlCarousel({
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    items: 1,
    autoplay: true,
    autoplayTimeout: 8000,
    autoplayHoverPause: true,
    mouseDrag: false,
    touchDrag: false,
    loop: true,
    center: true,
    autoWidth: true,
    navText: ['<i class="fa fa-arrow-left"></i>', '<i class="fa fa-arrow-right"></i>'],
    nav: true,
    dots: true
});
--></script>

 

Шаг 5 пропустил, в последней версии такой строки просто нет.

При подключении анимации из animate.css в настройках слайдера не меняется скорость смены слайда. Для этого нужно поправить файл стилей owl.carousel.css изменив значение duration на необходимое

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 2500ms;
  animation-fill-mode: both; }

 

[HyperLabTeam]

мануалы тут но это в 2х
https://owlcarousel2.github.io/OwlCarousel2/

а в 3х используется получше слайдер
http://idangero.us/swiper/

если озадачиться то и заменить можно