owl carousel

[Rubik]

Здравствуйте, подскажите пж opencart 2.2.0.0 в продукте дополнительный товар выводиться с помощью owl carousel в Position image additional: bottom есть прокрутка товара c низ так же можно вывести доп товар с лева от картинки товара но нет прокрутки. Подскажите что не так делаю.

Выводит доп картинки с лева

Скрытый текст

<div class="col-sm-3">
<div class="thumbnails thumbnails-left clearfix">
   <ul>
     <?php if($theme_options->get( 'product_image_zoom' ) != 2 && $thumb) { ?>
      <li><p><a href="<?php echo $popup; ?>" class="popup-image" data-image="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>"><img src="<?php echo $theme_options->productImageThumb($product_id, $config->get($config->get('config_theme') . '_image_additional_width'), $config->get($config->get('config_theme') . '_image_additional_height')); ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
     <?php } ?>
      <?php foreach ($images as $image) { ?>
      <li><p><a href="<?php echo $image['popup']; ?>" class="popup-image" data-image="<?php echo $image['popup']; ?>" data-zoom-image="<?php echo $image['popup']; ?>"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
      <?php } ?>
  </ul>
</div>
</div>

 

Пробовал так

Скрытый текст

<div class="col-sm-3">
<div class="thumbnails thumbnails-left clearfix">
   <ul class="thum-left">
     <?php if($theme_options->get( 'product_image_zoom' ) != 2 && $thumb) { ?>
      <li><p><a href="<?php echo $popup; ?>" class="popup-image" data-image="<?php echo $thumb; ?>" data-zoom-image="<?php echo $popup; ?>"><img src="<?php echo $theme_options->productImageThumb($product_id, $config->get($config->get('config_theme') . '_image_additional_width'), $config->get($config->get('config_theme') . '_image_additional_height')); ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
     <?php } ?>
      <?php foreach ($images as $image) { ?>
      <li><p><a href="<?php echo $image['popup']; ?>" class="popup-image" data-image="<?php echo $image['popup']; ?>" data-zoom-image="<?php echo $image['popup']; ?>"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></p></li>
      <?php } ?>
  </ul>
//Добавил скрипт
   <script type="text/javascript">
      $(".thum-left").owlCarousel({
      loop: true,
      autoplay: true,
      items: 3,
      navigation: true,
      autoplayHoverPause: true,
      animateOut: 'slideOutUp',
      animateIn: 'slideInUp'
      });
</script>
</div>
         </div>

 

но тогда доп фото отображается горизонтально. Подскажите пж.

[Rubik]

может кому то пригодится решил с помощью thumbelina ссылка на github тут описание как можно реализовать

Вкратце

1. в catalog/view/theme/default/template/common/header.tpl подключаем js и css

2. в catalog/view/theme/default/template/product/product.tpl добавляем в нужном месте 

<div  id="slider3"></div>
   <div class="thumbelina-but vert top">&#708;</div>

 

и вставляем скрип 

Скрытый текст

<!-- Create sliders. -->
<script type="text/javascript">
    $(function(){
        
        $('#slider1').Thumbelina({
            $bwdBut:$('#slider1 .left'),    // Selector to left button.
            $fwdBut:$('#slider1 .right')    // Selector to right button.
        });
        
        $('#slider2').Thumbelina({
            $bwdBut:$('#slider2 .left'),    // Selector to left button.
            $fwdBut:$('#slider2 .right')    // Selector to right button.
        });
        
        $('#slider3').Thumbelina({
            orientation:'vertical',         // Use vertical mode (default horizontal).
            $bwdBut:$('#slider3 .top'),     // Selector to top button.
            $fwdBut:$('#slider3 .bottom')   // Selector to bottom button.
        });
      
    })
</script>