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

Question

[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 без повторного вызова цикла?
Как отключить слайдер нашел, через повторный цикл - понятно, но не хочется плодить дубликаты и скрывать это под капот стилями.

Answer 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. Вуаля! все работает и без кривостей и костылей

Answer 2

[Сергей Лещенко]

Например добавьте условие

if(window.innerWidth > 600) {
$('.slider').slick({
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: true,
    infinite: true,
    cssEase: 'linear',
    responsive: [
      {
        breakpoint: 480,
        settings: "unslick"
      }
    ]
});
}

Comments

[ligisayan]

Сергей Лещенко и что тогда? как сетка будет строиться в этом случае?
Сам слайдер на малых разрешениях я отключил с помощью settings: "unslick"
но как сетка будет строиться?

[Сергей Лещенко]

Обычно для этого используют CSS

[ligisayan]

Сергей Лещенко, ну ок. Я знаю, как сделать сетку, другое дело, что пока вижу рабочий способ
2 раза вывожить цикл: один для слайдера, второй для сетки.

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(); ?>

Пока я не очень понимаю как ваше решение поможет фактически объединить в одно

[EvgenyMorozov]

С помощью медиазапросов под мобилки изменяйте класс .img-fluid