Адаптивная карусель

[valper]

Доброго времени суток. Версия 3.0.2.0-OpenCart, прикрутил стандартную карусель "swiper" к "Рекомендуемым товарам" по принципу стандартного модуля "Карусель производителей". Но не устраивает то что на всех разрешениях установлено 4 объекта в карусели. Как установить различное кол-во отображаемых товаров при разных разрешения, как это было в Opencart 2?

<script type="text/javascript"><!--
$('#extraproduct{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 4,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
	loop: true
});
--></script>

P.S. Что за фигня с кнопками переключения "ВПЕРЕД"  "НАЗАД" почему они в Opencart 3 переключают и слайдер и карусель, если их вывести в тело сайта подряд?

[170alex21]

$('#extraproduct{{ module }}').swiper({
    mode: 'horizontal',
    slidesPerView: 4,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    freeMode: true,
    loop: true,
     breakpoints: {
            1199: {
                slidesPerView: 3,
                spaceBetween: 10
            },
            767: {
                slidesPerView: 2,
                spaceBetween: 20
            }
        }
});
а если так?

Змінено 12 січня 2018 користувачем 170alex21

[isyskov]

<div class="swiper-viewport">
  <div id="CAROUSEL3IN1v01{{ 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 carousel{{ module }}"></div>
<!--
  <div class="swiper-pager">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
-->

</div>
<script type="text/javascript">
$('#CAROUSEL3IN1v01{{ module }}').swiper({
    mode: 'horizontal',
    slidesPerView: 3,
    pagination: '.carousel{{ module }}',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    autoplay: 7500,
    stopOnHover: true,
    loop: true
});</script>

 

пролистывание во всех модулях на странице, мучаюсь со строкой:

pagination: '.carousel{{ module }}',

 

--

opencart 3.0.2.0 theme default