Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

 

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

<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

Edited by btrotsky
Link to post
Share on other sites

26 минут назад, AWARO сказал:

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

 

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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>

 

 

 

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

Link to post
Share on other sites

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

 

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

Edited by btrotsky
Link to post
Share on other sites

34 минуты назад, buslikdrev сказал:

Ищите на форуме или на форуме через гугл, такие решения есть.

 

А как это правильно называется?

Link to post
Share on other sites

В 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

Edited by isyskov
Link to post
Share on other sites

19 часов назад, buslikdrev сказал:

Карусель ключевое слово.

 

Спасибо!

  • +1 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.