клон стандартного модуля carousel (slideshow)

[isyskov]

Создал клон карусели (нужны были наборы по 3/5/7 и т.д. слайдов), разместил несколько модулей (из разных клонов) на странице. При нажатии на pagination слайды реагируют (листаются) во всех клонах/модулях сразу. Полагаю дело в swiper.min.js ?

КЛОН:

\catalog\controller\extension\module\carousel.php

<?php
class ControllerExtensionModuleCAROUSEL3IN1v01 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/swiper/css/swiper.min.css');
        $this->document->addStyle('catalog/view/javascript/jquery/swiper/css/opencart.css');
        $this->document->addScript('catalog/view/javascript/jquery/swiper/js/swiper.jquery.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/CAROUSEL3IN1v01', $data);
    }
}

\catalog\view\theme\default\template\extension\module\CAROUSEL3IN1v01.twig

<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,
    loop: true
});</script>

 

Ну и хочу понять - куда ведёт эта строка...

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

--
в платных услугах не нуждаюсь, копаю сам, кеш и модификаторы обновляю. openstore 3.0.2.0 Theme default

[ladOK]

В 18.09.2018 в 18:21, isyskov сказал:

Создал клон карусели (нужны были наборы по 3/5/7 и т.д. слайдов), разместил несколько модулей (из разных клонов) на странице. При нажатии на pagination слайды реагируют (листаются) во всех клонах/модулях сразу. Полагаю дело в swiper.min.js ?

КЛОН:

\catalog\controller\extension\module\carousel.php

<?php
class ControllerExtensionModuleCAROUSEL3IN1v01 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/swiper/css/swiper.min.css');
        $this->document->addStyle('catalog/view/javascript/jquery/swiper/css/opencart.css');
        $this->document->addScript('catalog/view/javascript/jquery/swiper/js/swiper.jquery.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/CAROUSEL3IN1v01', $data);
    }
}

\catalog\view\theme\default\template\extension\module\CAROUSEL3IN1v01.twig

<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,
    loop: true
});</script>

 

Ну и хочу понять - куда ведёт эта строка...

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

--
в платных услугах не нуждаюсь, копаю сам, кеш и модификаторы обновляю. openstore 3.0.2.0 Theme default

 

а  куда он может вести это строка? это же параметр, в который записывается название селектора css  .carousel0,.carousel1,.carousel2,.carousel3.. Это просто стиль пагинации,я так понимаю

[isyskov]

готово - в этих строках НЕ заменил carousel

<div class="swiper-pagination carousel{{ module }}"></div>

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