[Решено] Как изменить эффект смены картинок в СлайдШоу на главной

[akulukin]

Добрый день коллеги!

У меня самый последний Ocstore.

Всем нравиться стандартный слайдшоу.

Время между сменами баннеров сменил, на чуть большее, вот здесь:

catalog\view\theme\default\template\extension\module\slideshow.twig

 

А вот сменить эффект смены баннеров - не знаю где???

В просторах интернета ответ на этот вопрос даёт только "ТемплМонстр",

но для старой версии Опенкарта.

А в свежей версии, где это делается, в каком js - файле?

 

Подскажите, пожалуйста.

 

 

Edited December 13, 2017 by akulukin

[Xelen]

в контроллере

catalog/controller/extension/module/slideshow.php

должен быть путь ко всем применяемым js  файлам

[akulukin]

Да, открыл единственный файл, на который есть ссылка с помощью Adobe DW.

Там весь код навален в одну кучу, "чёрт ногу слОмет".

 

Может кто сталкивался с этим?

Есть конкретное решение

Коллеги, отзовитесь!

Edited December 13, 2017 by akulukin

[Atlogex]

Видимо всё же не последний окстор, а последний, то есть 3 опенкарт. Там для слайдшоу стоит плагин Swiper, офф. дока - http://idangero.us/swiper/api/

Эффекты анимации есть (при изменении не забудьте сбросить кэш), например 'fade' -

<script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 1,
	pagination: '.slideshow{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
	autoplay: 12500,
    autoplayDisableOnInteraction: true,
	loop: true, 
	effect: 'fade'
});
--></script>

 

Edited December 13, 2017 by Atlogex

[akulukin]

Прошу прощения, мне следовало бы написать точно, что у меня.

У меня не Опенкарт-3, а OcStore 2.3.0.2.1

Я копался в папках, Swiper - не встречал...

[Demidovez]

20 минут назад, akulukin сказал:

Прошу прощения, мне следовало бы написать точно, что у меня.

У меня не Опенкарт-3, а OcStore 2.3.0.2.1

Я копался в папках, Swiper - не встречал...

может это поможет: https://asterial.ru/saytostroenie/effekty-slaydera-owl-carousel-v-opencart-i-ocstore-2102-chto-delat-esli-slayder-ne

[Atlogex]

1 час назад, akulukin сказал:

 

Время между сменами баннеров сменил, на чуть большее, вот здесь:

catalog\view\theme\default\template\extension\module\slideshow.twig

 

Окстор с твигом? Или там tpl расширение всё таки?

В оксторе стоит Owl Carousel, надо смотреть что он умеет.

[akulukin]

Demidovez, вы нашли хорошую ссыль на информацию прямо таки по теме, однако когда начинаешь кликать на ссылке в этом тексте - они тянуться к каким-то вирусам и "Вулканам", жаль...

 

[akulukin]

23 минуты назад, Atlogex сказал:

 

Окстор с твигом? Или там tpl расширение всё таки?

В оксторе стоит Owl Carousel, надо смотреть что он умеет.

Да,

по файлам вижу, что есть такой "зверь" Owl Carusel, только вот где найти его js.

И что править, инструкцию бы...

[Demidovez]

10 минут назад, akulukin сказал:

Demidovez, вы нашли хорошую ссыль на информацию прямо таки по теме, однако когда начинаешь кликать на ссылке в этом тексте - они тянуться к каким-то вирусам и "Вулканам", жаль...

 

там по ссылке скорее всего список анимаций: fade, backSlide, goDown, scaleUp

Edited December 13, 2017 by Demidovez

[zlatoff]

На вскидку - в опенкарте много выпилили в owl библиотеках. Качните с оф.сайта и посмотрите именно css файлы - там эффектов полно, а в опенкарт посчитали нужным только простые промотки оставить. А смена эффекта js вставкой в странице рулится. 

[Atlogex]

Всё правильно Demidovez говорит, по ссылке его есть инструкция, как подключить стиль для переходов. Контроллер слайдшоу (\catalog\controller\extension\module\slideshow.php) должен выглядеть так -

<?php
class ControllerExtensionModuleSlideshow extends Controller {
	public function index($setting) {
		static $module = 0;		

		$this->load->model('design/banner');
		$this->load->model('tool/image');

		$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
		$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
		$this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js');

		$data['banners'] = array();

		$results = $this->model_design_banner->getBanner($setting['banner_id']);

		foreach ($results as $result) {
			if (is_file(DIR_IMAGE . $result['image'])) {
				$data['banners'][] = array(
					'title' => $result['title'],
					'link'  => $result['link'],
					'image' => $this->model_tool_image->resize($result['image'], $setting['width'], $setting['height'])
				);
			}
		}

		$data['module'] = $module++;

		return $this->load->view('extension/module/slideshow', $data);
	}
}

 

 

 

Потом добавить собственно название анимации в опции слайдера

<script type="text/javascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
	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,
    transitionStyle : "fade"
});
--></script>

 

[akulukin]

Спасибо коллеги Atlogex!!!

Всё сделал так и эффект изменился!

Вопрос решён.

 

Повторяю его слова пошаговой инструкцией, чтобы другим было проще понять.

 

1) По пути:
\catalog\controller\extension\module\slideshow.php
В файле «Slideshow.php» вписал новую строчку:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
После строчки:
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
 

2) Далее, по пути:
/catalog/view/theme/default/template/extension/module/slideshow.tpl
В файле “slideshow.tpl » добавил строчку:
transitionStyle : "fade"
После строчки:
pagination: true,
 

3) Пробовал менять значения «transitionStyle» на: "fade", "backSlide", "goDown"
Больше всего понравилось – fade, чего и Вам желаю.

 

Тема закрыта.

Вопрос - решён.