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

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

Обнаружил баг в модуле слайдшоу, кнопки навигации вынесены за пределы блока с идентификатором модуля, в следствии чего при размещении нескольких блоков на странице, вешается несколько обработчиков на кнопки навигации и перелистываются все слайды на странице

исходный код модуля slideshow.twig

Спойлер

<div class="swiper-viewport">
  <div id="slideshow{{ 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 slideshow{{ module }}"></div>
  <div class="swiper-pager">
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</div>
<script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 1,
	pagination: '.slideshow{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
	autoplay: 2500,
    autoplayDisableOnInteraction: true,
	loop: true
});
--></script>

 

 

Как должно быть

Спойлер

<div class="swiper-viewport">
  <div id="slideshow{{ 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 class="swiper-pagination slideshow{{ module }}"></div>
	<div class="swiper-pager">
		<div class="swiper-button-next"></div>
		<div class="swiper-button-prev"></div>
	</div>
  </div>
  <script type="text/javascript"><!--
$('#slideshow{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 1,
	pagination: '.slideshow{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    spaceBetween: 30,
	autoplay: 2500,
    autoplayDisableOnInteraction: true,
	loop: true
});
--></script>
</div>

 

 

И аналогично файл carousel.twig

Спойлер

<div class="swiper-viewport">
  <div id="carousel{{ 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 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"><!--
$('#carousel{{ module }}').swiper({
	mode: 'horizontal',
	slidesPerView: 5,
	pagination: '.carousel{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
	autoplay: 2500,
	loop: true
});
--></script>
</div>

 

 

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


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

И все же, какой сырой еще опенкарт 3

Изменено пользователем Pavel666

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


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

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

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

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

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

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

Войти

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

Войти

  • Похожий контент

    • От 112rub
      300.00 руб
      Скачать/Купить дополнение


      Карусель отзывов + страница со всеми отзывами для opencart \ ocStore 3
      Модуль позволяет вам отображать на любой странице карусель с последними отзывами. Так же есть страница со всеми отзывами.
      Все настройки модуля выполняются с панели администратора.
      Настройки:
      1. карусель
      1.1 заголовок карусели
      1.2 количество отзывов в карусели
      2. страница
      2.1 количество отзывов на странице
      2.2 meta-title
      2.3 meta_description
      2.4 meta_keyword
       
      Есть модификатор который добавит пункт "все отзывы" в главное меню 
      п.с
      для установки на версию opencart 2.3 необходимо включить ftp в настройках сайта или установить фикс

      Демо
       
       
       
      Добавил 112rub Добавлено 01.03.2018 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3 ocStore 3.0
      2.3 OpenCart.Pro, ocShop  
    • От 112rub
      Модуль позволяет вам отображать на любой странице карусель с последними отзывами. Так же есть страница со всеми отзывами.
      Все настройки модуля выполняются с панели администратора.
      Настройки:
      1. карусель
      1.1 заголовок карусели
      1.2 количество отзывов в карусели
      2. страница
      2.1 количество отзывов на странице
      2.2 meta-title
      2.3 meta_description
      2.4 meta_keyword
       
      Есть модификатор который добавит пункт "все отзывы" в главное меню 
      п.с
      для установки на версию opencart 2.3 необходимо включить ftp в настройках сайта или установить фикс

      Демо
       
       
       
    • От wmaxshaman
      Нужно немного поднять слайдшоу, не могу разобраться где это сделать. Может кто подскажет, в бустрапе мне это искать надо? Или же поступить по другому и опустить поиск и корзину ниже, но опять же...где это сделать? Версия Opencart 2.0.3.1

    • От lletol
      Скачать/Купить дополнение


      Brands block/carousel
      Каждый из нас сталкивался с тем, что необходимо вывести карусель логотипов производителей.
      Можно воспользоваться стандартными средствами через модуль карусель, но это не удобно, особенно если у вас производители постоянно обновляются или их очень много и приходится делать двойную работу.
      Модуль Brands block/carousel создан для решения этой задачи.
      Модуль выводит логотипы и ссылки на страницы производителя в магазине, данные берутся автоматически из базы магазина, что упрощает работу.
       
      Установка через OCMOD.
       
      Что же может модуль:
      вывести список производителей в виде меню вывести список производителей в виде блока с логотипами вывести список производителей в виде карусели  
       
      для типа отображения "Меню":         1.1) Количество производителей в блоке
              1.2) Вывести ссылку на страницу с перечнем всех производителей (и задать этой ссылке свой текст)
          
          2) для типа отображения "Блок":
              2.1) Показывать только логотипы или логотип и название производителя
              2.2) Выводить или нет производителей у которых нет логотипа (с возможностью задать картинку заглушку если у производителя нет логотипа)
              2.3) Количество производителей в блоке
              2.4) Возможность вывести ссылку (текст / картинку / текст с картинкой) на страницу с перечнем всех производителей (и задать этой ссылке свой текст)
              2.5) Указать размеры логотипов в блоке
              
          3) для типа отображения "Карусель":
              3.1) Выбрать скрипт, с помощью которого будет организована карусель
              3.2) Выбрать ориентацию карусели (вертикально или горизонтально)
              3.3) Циклическая карусель или нет
              3.5) Возможно включения/отключения авто старта
              3.6) Возможно включения/отключения паузы при наведении
              3.7) Возможно установить скорость анимации
              3.8) Установка заголовок блока
              3.9) Выбор количества видимых элементов карусели
              3.10) Выбор количества элементы для прокрутки
              3.11) Размеры изображения логотипа (Ширина x Высота)
       
      Добавил lletol Добавлено 14.07.2016 Категория Слайдшоу, баннеры, галереи Системные требования Сайт разработчика http://oc.byhelp.info Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От lletol
      Каждый из нас сталкивался с тем, что необходимо вывести карусель логотипов производителей.
      Можно воспользоваться стандартными средствами через модуль карусель, но это не удобно, особенно если у вас производители постоянно обновляются или их очень много и приходится делать двойную работу.
      Модуль Brands block/carousel создан для решения этой задачи.
      Модуль выводит логотипы и ссылки на страницы производителя в магазине, данные берутся автоматически из базы магазина, что упрощает работу.
       
      Установка через OCMOD.
       
      Что же может модуль:
      вывести список производителей в виде меню вывести список производителей в виде блока с логотипами вывести список производителей в виде карусели  
       
      для типа отображения "Меню":         1.1) Количество производителей в блоке
              1.2) Вывести ссылку на страницу с перечнем всех производителей (и задать этой ссылке свой текст)
          
          2) для типа отображения "Блок":
              2.1) Показывать только логотипы или логотип и название производителя
              2.2) Выводить или нет производителей у которых нет логотипа (с возможностью задать картинку заглушку если у производителя нет логотипа)
              2.3) Количество производителей в блоке
              2.4) Возможность вывести ссылку (текст / картинку / текст с картинкой) на страницу с перечнем всех производителей (и задать этой ссылке свой текст)
              2.5) Указать размеры логотипов в блоке
              
          3) для типа отображения "Карусель":
              3.1) Выбрать скрипт, с помощью которого будет организована карусель
              3.2) Выбрать ориентацию карусели (вертикально или горизонтально)
              3.3) Циклическая карусель или нет
              3.5) Возможно включения/отключения авто старта
              3.6) Возможно включения/отключения паузы при наведении
              3.7) Возможно установить скорость анимации
              3.8) Установка заголовок блока
              3.9) Выбор количества видимых элементов карусели
              3.10) Выбор количества элементы для прокрутки
              3.11) Размеры изображения логотипа (Ширина x Высота)
       
  • Последние посетители   0 пользователей онлайн

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

×

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

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