Как сделать чтобы при ширине экрана в 400px осталась одна карусель?

Question

[Greeg Zagrelov]

На весь экран:



На 400px:

<div class="swiper-container swiper-sub" id="swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide" id="swiper-sub">
                                    <div class="swiper_container">

                                        <div>
                                            <h4>
                                                Сергей
                                                <span>Трехкомнатная квартира, 60 м2 </span>
                                            </h4>

                                        </div>
                                        <div>
                                            <p>
                                                Хочется со всей искренностью поблагодарить Павла за такую кропотливую и честную работу. Я, будучи человеком занятым, не мог часто приезжать и следить за исполнением и продвижением работ в квартире, но доверившись этому человеку, не прогадал. Все на совесть,
                                                как для себя. кстати говоря, очень удивило, что первоначальная смета сильно не разнилась от итоговой стоимости (а вся разница вышла из-за того, что я решил использовать немного другие материалы и изменить
                                                проект). Приятно было работать, спасибо большое.
                                            </p>
                                        </div>

                                    </div>

                                </div>
                                <div class="swiper-slide" id="swiper-sub">
                                    <div class="swiper_container">
                                        <div>
                                            <h4>
                                                Елена
                                                <span>Офисное помещение , 120 м2</span>
                                            </h4>

                                        </div>
                                        <div>
                                            <p>
                                                Хочу выразить огромную благодарность компании Бергини. Заказывали ремонт офиса под ключ, всё сделали на совесть, и подошли к делу ответственно. Я желаю процветания Вашей компании и хороших клиентов. Спасибо!
                                            </p>
                                        </div>
                                    </div>

                                </div>
                                <div class="swiper-slide" id="swiper-sub">

                                    <div class="swiper_container">

                                        <div>
                                            <h4>
                                                Юля
                                                <span>Трехкомнатная квартира, 60 м2 </span>
                                            </h4>

                                        </div>
                                        <div>
                                            <p>
                                                Хочется со всей искренностью поблагодарить Павла за такую кропотливую и честную работу. Я, будучи человеком занятым, не мог часто приезжать и следить за исполнением и продвижением работ в квартире, но доверившись этому человеку, не прогадал. Все на совесть,
                                                как для себя. кстати говоря, очень удивило, что первоначальная смета сильно не разнилась от итоговой стоимости (а вся разница вышла из-за того, что я решил использовать немного другие материалы и изменить
                                                проект). Приятно было работать, спасибо большое.
                                            </p>
                                        </div>

                                    </div>

var swiper = new Swiper('.swiper-sub', {
                slidesPerView: 2, --- Это сколько их будет видно на весь экран 2
                spaceBetween: 30,
                slidesPerGroup: 1,
                loop: true,
                loopFillGroupWithBlank: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-n',
                    prevEl: '.swiper-button-b',
                },
            });
        </script>

Answer 1

[xdevelx]

Есть же документация https://swiperjs.com/api/
И вот пример оттуда

var swiper = new Swiper('.swiper-container', {
  // Default parameters
  slidesPerView: 1,
  spaceBetween: 10,
  // Responsive breakpoints
  breakpoints: {
    // when window width is >= 320px
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    // when window width is >= 480px
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    // when window width is >= 640px
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
  }
})

Comments

[Greeg Zagrelov]

Ну это когда смотрю в книгу вижу фигу) спасибо