@ligisayan

Как сделать слайдер изображений который на мобильнике превращается в сетку?

Есть слайдер изображений на wordpress сайте, которые выводятся стандартным циклом.

while ( $loop->have_posts() ): $loop->the_post(); ?>
  <div>
    <div class="img-wrapper">
       <?php if ( has_post_thumbnail()) {
             the_post_thumbnail('full','class=img-fluid');
        } ?>
    </div> 
   <?php endwhile; wp_reset_postdata(); ?>


Как сделать так, чтобы на мобильных разрешениях уже вместо слайдера выводить сетку bootstrap без повторного вызова цикла?
Как отключить слайдер нашел, через повторный цикл - понятно, но не хочется плодить дубликаты и скрывать это под капот стилями.

  • Вопрос задан
  • 233 просмотра
Решения вопроса 1
@ligisayan Автор вопроса
На основе мысле EvgenyMorozov нашел решение, может быть кому-нить тоже пригодится (привожу вкратце)

1. делаем такую обертку - добавляем в каркас классы grid-row и grid-col, которые будут иммитировать bootstrap сетку.
<div class="slider grid-row" >
while ( $loop->have_posts() ): $loop->the_post(); ?>
  <div class="grid-col">
    <div class="img-wrapper">
       <?php if ( has_post_thumbnail()) {
             the_post_thumbnail('full','class=img-fluid');
        } ?>
    </div> 
   <?php endwhile; wp_reset_postdata(); ?>
</div>


2. Устанавливаем у слайдера параметры для мобильных разрешений, чтобы на них не инициализировался
{
          breakpoint: 480,
          settings: "unslick"
        }


3. Прописываем классы иммитируюшие bootstrap сетку
@media (max-width: 480px) {
	.product-row {    
	    display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	    margin-right: -15px;
	    margin-left: -15px;
	}
	.product-col-6 {
	    -webkit-box-flex: 0;
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	    position: relative;
	    width: 100%;
	    min-height: 1px;
	    padding-right: 15px;
	    padding-left: 15px;
	}	
}


4. Вуаля! все работает и без кривостей и костылей
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Например добавьте условие
if(window.innerWidth > 600) {
$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    responsive: [
      {
        breakpoint: 480,
        settings: "unslick"
      }
    ]
});
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы