Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Карусель брендов в три строки

btrotsky

Автор: ,
в Opencart 3.x: Загальні питання

 Share

Recommended Posts

btrotsky Proficient

btrotsky

Опубліковано:
Опубліковано: (змінено)

Как сделать карусель брендов в три строки.

 

Код карусели сейчас  

<div class="brand-carousel">
<div class="box-heading"><h3>{{ brand_heading_title }}</h3></div>
<div class="swiper-viewport">
  <div id="carousel{{ module }}" class="swiper-container brand-items">
    <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-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
</div>
<script type="text/javascript"><!--
$('#carousel{{ module }}').swiper({
	mode: 'horizontal',
	autoplay: 3000,
	//pagination: '.carousel{{ module }}',
	pagination: false,
	paginationClickable: false,
    prevButton: '.swiper-button-prev',
	nextButton: '.swiper-button-next',
	
 // Default parameters
  slidesPerView: 5,
  
  // Responsive breakpoints
  breakpoints: {
	    // when window width is <= 1200px
	    1200: {
	      slidesPerView: 4
	    },
	 	// when window width is <= 991px
	    991: {
	      slidesPerView: 4
	    },
	 	// when window width is <= 767px
	    767: {
	      slidesPerView: 3
	    },
	    // when window width is <= 480px
	    480: {
	      slidesPerView: 2
		}
   }

});
--></script>

Версия опенкарта 3.0.2.0

 

Пример как должно выглядеть https://gyazo.com/cf34a4550911c5677fa9d9f3b95e974b

Змінено користувачем btrotsky
Надіслати
Поділитися на інших сайтах

btrotsky Proficient

btrotsky

Опубліковано:
  • Автор
Опубліковано:
26 минут назад, AWARO сказал:

три модуля корусели друг под другом

 

не такой вариант не катит, тогда получается три переключателя, нужно один

Надіслати
Поділитися на інших сайтах

btrotsky Proficient

btrotsky

Опубліковано:
  • Автор
Опубліковано:
В 14.09.2018 в 21:33, buslikdrev сказал:
  Скрыть контент

Для 2,3 так:
  



<div id="carousel<?php echo $module; ?>" class="owl-carousel">

<?php foreach (array_chunk($banners, ceil(count($banners) / 4)) as $banners) { ?>
  <div class="col-sm-3">

  <?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>
<?php } ?>

</div>
<script type="text/javascript"><!--
$('#carousel<?php echo $module; ?>').owlCarousel({
	items: 6,
	autoPlay: 3000,
	navigation: true,
	navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
	pagination: true
});
--></script>

 

Для 3,0 примерно так: 



<div class="brand-carousel">
<div class="box-heading"><h3>{{ brand_heading_title }}</h3></div>
<div class="swiper-viewport">
  <div id="carousel{{ module }}" class="swiper-container brand-items">
    <div class="swiper-wrapper">
      
{% for banners in banners|batch((banners|length / 4)|round(1, 'ceil')) %}
    <div class="col-sm-3" style="height:100%;">
      
	  {% 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>
{% endfor %}
      
	</div>
  </div>
  <div class="swiper-pagination carousel{{ module }}"></div>
  <div class="swiper-pager">
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</div>
</div>
<script type="text/javascript"><!--
$('#carousel{{ module }}').swiper({
	mode: 'horizontal',
	autoplay: 3000,
	//pagination: '.carousel{{ module }}',
	pagination: false,
	paginationClickable: false,
    prevButton: '.swiper-button-prev',
	nextButton: '.swiper-button-next',
	
 // Default parameters
  slidesPerView: 5,
  
  // Responsive breakpoints
  breakpoints: {
	    // when window width is <= 1200px
	    1200: {
	      slidesPerView: 4
	    },
	 	// when window width is <= 991px
	    991: {
	      slidesPerView: 4
	    },
	 	// when window width is <= 767px
	    767: {
	      slidesPerView: 3
	    },
	    // when window width is <= 480px
	    480: {
	      slidesPerView: 2
		}
   }

});
--></script>

 

 

 

Работает, но нету слайдера, то есть если добавлю 16 брендов, то 4 ряда, если добавлю 20 то 5 рядов и т.д.

Хочу вот именно как на этом сайте https://bi.ua/rus/brands/

Надіслати
Поділитися на інших сайтах

btrotsky Proficient

btrotsky

Опубліковано:
  • Автор
Опубліковано:
40 минут назад, buslikdrev сказал:


Ещё можно просто в скрипте добавить условие slidesPerColumn: 3,

Например:

  Скрыть контент

<script type="text/javascript"><!--
$('#carousel{{ module }}').swiper({
    mode: 'horizontal',
    autoplay: 3000,
    //pagination: '.carousel{{ module }}',
    pagination: false,
    paginationClickable: false,
    prevButton: '.swiper-button-prev',
    nextButton: '.swiper-button-next',
    slidesPerColumn: 3,
 // Default parameters
  slidesPerView: 5,
  
  // Responsive breakpoints
  breakpoints: {
        // when window width is <= 1200px
        1200: {
          slidesPerView: 4
        },
         // when window width is <= 991px
        991: {
          slidesPerView: 4
        },
         // when window width is <= 767px
        767: {
          slidesPerView: 3
        },
        // when window width is <= 480px
        480: {
          slidesPerView: 2
        }
   }

});
--></script>


Нашёл здесь: catalog/view/javascript/jquery/swiper/js/swiper.jquery.js

Мой код таков:

  Скрыть контент 


<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>
  <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,
    slidesPerColumn: 3,
	pagination: '.carousel{{ module }}',
	paginationClickable: true,
	nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
	autoplay: 2500,
	//loop: true
});
--></script>

 

 

 

что у меня не работает условие, все осталось как было, а ваш код, если вставить полностью то работает, но стили слезают

Надіслати
Поділитися на інших сайтах

btrotsky Proficient

btrotsky

Опубліковано:
  • Автор
Опубліковано: (змінено)

@buslikdrev Сделал по вашему коду карусель, настроил немного вывод, посмотрим понравится ли заказчику))

 

Можно еще один вопрос, может знаете, как можно сделать переключатель картинок (следущая-предыдущая) в карточке товара на самой картинке, вот как тут https://gyazo.com/314d2f0694607a781e08b330d0480068

Змінено користувачем btrotsky
Надіслати
Поділитися на інших сайтах

isyskov Apprentice

isyskov

Опубліковано:
Опубліковано: (змінено)
В 14.09.2018 в 13:31, btrotsky сказал:

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

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

<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>

 

--

opencart 3.0.2.0 theme default

Змінено користувачем isyskov
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду