Доска почета

В стандартном шаблоне Opencart 2 дополнительные изображения товаров выводятся без скрола (карусели), захотелось решить. На досуге занимался, код кривой, работает под дефолтной схемой, но может быть кому-то пригодится. Пример получившегося во вложении. 1) \catalog\controller\product\product.php где-нибудь после $this->document->addStyle('catalog/view/javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css'); добавляем $this->document->addStyle('catalog/view/javascript/jquery/owl-carousel/owl.carousel.css'); $this->document->addScript('catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js'); 2) \catalog\view\theme\default\template\product\product.tpl 2.1) в начало файла <style> #owl-demo .item{ padding: 1px 1px; margin: 1px; color: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .customNavigation{ text-align: center; } .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .owl-carousel .owl-buttons .owl-prev{ left:1px !important; opacity: 0.4 !important; } .owl-carousel .owl-buttons .owl-next{ right:1px !important; opacity: 0.4 !important; } .owl-carousel:hover .owl-buttons div{ opacity:0.7 !important; } </style> 2.2 в конец, в скрипты $(document).ready(function() { var owl = $("#owl-demo"); owl.owlCarousel({ items : 3, itemsDesktop : [1000,3], itemsDesktopSmall : [900,3], itemsTablet: [600,2], itemsMobile : false, navigation : true, navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'], pagination: false }); }); 2.3 вывод дополнительных картинок <?php if ($images) { ?> <?php foreach ($images as $image) { ?> <li class="image-additional"><a class="thumbnail" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>"> <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> <?php } ?> меняем на <?php if ($images) { ?> <div id="owl-demo" class="owl-carousel owl-theme"> <?php foreach ($images as $image) { ?> <div class="item"> <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a> </div> <?php } ?> </div> <?php } ?>