OpenCart – change slideshow effect
In OpenCart 2 include jQuery library slideshow - Owl Carousel. For changed effect transition slider need editing 2 file or for OpenCart 3 - simple add option in lists options sliders. But let's start in order.
Add new effect in slideshow OpenCart 2
Owl Carousel in Opencart 2 have 4 additional different transition effects:
- "fade";
- "backSlide";
- "goDown";
- "fadeUp"
For activations this effect need include css file "owl.transitions.css" in controller slideshow extension and edit view file slideshow extension. Use next instruction.
1 - Open controller slideshow extensions, path -
catalog\controller\extension\module\slideshow.php
2 - Find this row, include base style -
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css');
3 - after found row, add row include "owl.transitions.css"
$this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.transitions.css');
4 - open template extensions file
catalog\view\theme\default\template\extension\module\slideshow.tpl
5 - add option transitionStyle in template file module
transitionStyle : "fade"
As a result controller Slideshow -
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?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); } } |
And result template Slideshow -
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<div id="slideshow<?php echo $module; ?>" class="owl-carousel sssss" style="opacity: 1;"> <?php foreach ($banners as $banner) { ?> <div class="item"> <?php if ($banner['link']) { ?> <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a> <?php } else { ?> <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /> <?php } ?> </div> <?php } ?> </div> <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> |
Don`t work "scaleUp" in Owl Carousel?
Sometimes in instruction can find effect "scaleUp", this is wrong. Use "fadeUp" instead "scaleUp".
use "fadeUp" instead ScaleUp - little wrong comment
OpenCart 3 change transition effect
For slideshow in OpenCart 3 use jQuery plugin Swipe. It have next animation -
- "slide";
- "fade";
- "cube";
- "coverflow";
- "flip".
For change default effect need add row in option slider which in next file
catalog\view\theme\default\template\extension\module\slideshow.twig
Sample, effect fade added in 25 row (and a comma in 24 row):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<div class="swiper-viewport"> <div id="slideshow{{ module }}" class="swiper-container"> <div class="swiper-wrapper"> {% for banner in banners %} <div class="swiper-slide text-center">{% if banner.link %}<a href="{{ banner.link }}"><img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" /></a>{% else %}<img src="{{ banner.image }}" alt="{{ banner.title }}" class="img-responsive" />{% endif %}</div> {% endfor %} </div> </div> <div class="swiper-pagination slideshow{{ module }}"></div> <div class="swiper-pager"> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> <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: 2500, autoplayDisableOnInteraction: true, loop: true, effect: 'fade' }); --></script> |
(1 votes, average: 10.00 out of 10)
Loading...
Здравствуйте!
У меня на Опенкарт з в карточке товара стоит Elevate Zoom. При попытке подключения Swiper в карточке товара, Swier не работает. Стрелочки появляются, но они не кликабельны.
Подскажите, пожалуйста, есть ли способ это исправить.
Добрый день.
Все зависит от конкретной реализации, но вероятно у вас просто конфликт между js библиотеками.
Быстрее получить помощь/найти фрилансера, можно в специализированных сообществах. Для Опенкарта, это например – opencartforum.com