Перейти к содержанию
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

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


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

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

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


Ссылка на сообщение
Поделиться на другие сайты
26 минут назад, AWARO сказал:

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

 

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

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


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

Для 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>

 

 

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


Ссылка на сообщение
Поделиться на другие сайты
В 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/

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


Ссылка на сообщение
Поделиться на другие сайты
2 часа назад, btrotsky сказал:

 

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

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


Ещё можно просто в скрипте добавить условие 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>

 

 

  • +1 1

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


Ссылка на сообщение
Поделиться на другие сайты
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>

 

 

 

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

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


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

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

 

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

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

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


Ссылка на сообщение
Поделиться на другие сайты
8 минут назад, btrotsky сказал:

 

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

К сожалению, я сделал всё что смог.
У меня работает на стандартном шаблоне:
 

Спойлер

image.thumb.png.6e10a90a76c408dd2a9eea54b024e9a0.png

 

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


Ссылка на сообщение
Поделиться на другие сайты
3 минуты назад, btrotsky сказал:

Можно еще один вопрос, может знаете, как можно сделать переключатель картинок (следущая-предыдущая) в карточке товара на самой картинке, вот как

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

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


Ссылка на сообщение
Поделиться на другие сайты
34 минуты назад, buslikdrev сказал:

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

 

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

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


Ссылка на сообщение
Поделиться на другие сайты
11 минут назад, btrotsky сказал:

 

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

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

  • +1 1

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


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

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


Ссылка на сообщение
Поделиться на другие сайты
19 часов назад, buslikdrev сказал:

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

 

Спасибо!

  • +1 1

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


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

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

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

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

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

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

Войти

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

Войти

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

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

×

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

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