Перейти к содержанию
isyskov

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

Рекомендуемые сообщения

Создал клон карусели (нужны были наборы по 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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
В 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.. Это просто стиль пагинации,я так понимаю

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

<div class="swiper-pagination carousel{{ module }}"></div>
pagination: '.carousel{{ module }}',

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.