Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

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


Recommended Posts

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

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

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

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

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

 

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

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

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

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

 

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

 

 

Edited by akulukin
Link to comment
Share on other sites


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

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

 

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

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

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

Edited by akulukin
Link to comment
Share on other sites


Видимо всё же не последний окстор, а последний, то есть 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 by Atlogex
Link to comment
Share on other sites


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

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

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

Link to comment
Share on other sites


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

Link to comment
Share on other sites


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

 

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

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

 

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

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

Link to comment
Share on other sites


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

 

Link to comment
Share on other sites


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

 

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

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

Да,

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

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

Link to comment
Share on other sites


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

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

 

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

Edited by Demidovez
Link to comment
Share on other sites


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

Link to comment
Share on other sites


Всё правильно 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>

 

Link to comment
Share on other sites


Спасибо коллеги 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, чего и Вам желаю.

 

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

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

Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.