Адаптивный модуль Карусель на Opencart

OpenCart, Интернет-магазины / От

По умолчанию модуль карусель в Opencart используется для вывода производителей товаров.

 

Не могу сказать, что этот модуль очень популярен, но на части магазинов он используется. 

Единственным недостатком данного модуля является то, что он не адаптивен для мобильных устройств, то есть количество изображений производителей постоянно для компьютера и мобильного устройства.

 

Расскажу как можно его адаптировать. Для начала откроем файл вывода в пользовательскую часть

 

Видим, что используется js скрипт owl-carusel. Поизучаем возможности скрипта

На странице https://owlcarousel2.github.io/OwlCarousel2/demos/responsive.html

мы можем получить информацию как его настраивать.

 

То есть варианты адаптивности в нем поддерживаются и мы можем настроить наш скрипт аналогичным образом. Логика понятна, поэтому приведу код своего готового tpl.

 

 <div id="carousel<?php echo $module; ?>" class="carousel owl-carousel owl-one">
    <?php foreach ($banners as $banner) { ?>
    <div class="item text-center">
      <?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>
            $(document).ready(function() {
              $('.owl-one').owlCarousel({
                loop: true,
                dots: false,
                margin: 10,
                responsiveClass: true,
                responsive: {
                  0: {
                    items: 2,
                    nav: true
                  },
                  600: {
                    items: 2,
                    nav: true
                  },
                  1000: {
                    items: 5,
                    nav: true,
                    loop: false,
                    margin: 20
                  }
                }
              })
            })
          </script>
Пролистать наверх