Как сделать карусель на мобиле и планшете, которая пропадает при продлении мд

Question

На самом деле я делаю сайт, где для полноразмерного дизайна требуется .row с 3 столбцами внутри каждого столбца с картой bootstrap4. Это легко, но когда размер уменьшится до размера планшета и мобильного устройства, это будет карусель этих 3 изображений.

Возможно ли это сделать? факт использования сетки делает эту карусель немного запутанной.

это то, что я пытаюсь кодировать:

Полный размер:

Мобильный телефон:

это мой код в полном размере

<div class="row justify-content-center">
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Panaderia Basica</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">Ver mas  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Panaderia Basica</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">Ver mas  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
  <div class="col-md-4 d-flex justify-content-center">
    <div class="card card-radius" style="width: 18rem;">
      <img src="https://res.cloudinary.com/gnprojects/image/upload/v1546624022/cursos_1.jpg" class="card-img-top card-image-radius" alt="...">
      <div class="card-body">
        <h3 class="card-title">Panaderia Basica</h3>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#">Ver mas  <i class="fas fa-angle-right"></i></a>
      </div>
    </div>
  </div>
</div>

Я ожидаю, что это превратится в карусель, когда она достигнет размера планшета. Придется ли мне кодировать один и тот же блок кода в теги карусели и использовать запросы @media, чтобы скрыть полноразмерный код и показать карусель на размере планшета?

Answer 1

Спасибо, Джейси, за ваш ответ. После долгих часов построения карусели с сеткой мне удалось удалить классы карусели с помощью jQuery.

Это результат гибкой карусели Bootstrap4 для мобильных устройств и планшетов, но когда ширина экрана превышает 676 пикселей, она больше не является каруселью.

[codepen] [1]

[1]: https://codepen.io/gabonessi/pen/REyXoM

Answer 2

Это код, который вам нужен для загрузки карусели: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

Вам нужен другой HTML-код, потому что вам нужен класс слайдов карусели, чтобы активировать карусель.

Если вы можете динамически изменять этот класс (например, через PHP), вы можете решить его с помощью идентичного кода. В зависимости от заданного видового экрана вы должны добавить классы начальной загрузки, необходимые для карусели. То же самое касается управления каруселью и т. Д.

Существуют различные варианты проверки размера области просмотра в PHP, например: * https://tutbakery.com/how-to-use-media-queries-in-php/ * https://gist.github.com/dcondrey/11342487