Пользователь пока ничего не рассказал о себе

Достижения

Все достижения (10)

Наибольший вклад в теги

Все теги (82)

Лучшие ответы пользователя

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

    @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. Вуаля! все работает и без кривостей и костылей
    Ответ написан
    Комментировать

Лучшие вопросы пользователя

Все вопросы (501)