CODEWITHSUNDEEP
htmlcssbootstrap-4
Gabriel Nessi
Gabriel Nessi

Reputation: 325

How to making a carousel on mobile and tablet that dissapears when extend md

Actually, I'm making a website where the full-size design requires a .row with 3 columns inside each column with a bootstrap4 card. That's easy but when it gets reduced to tablet and mobile size it should be a carousel of these 3 images.

Is this possible to make? the fact of using the grid makes this carousel a bit confusing.

this is what I am trying to code:

Full size:

enter image description here

Mobile:

enter image description here

this is my code for the full size

<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>

I expect this to convert into a carousel when it hits tablet size. Would I have to code the same block of code into carousel tags and use @media queries to hide the full-size code and show the carousel on tablet size?

Upvotes: 0

Views: 345

Answers (2)

Gabriel Nessi
Gabriel Nessi

Reputation: 325

Thank you Jasie for your answer. After long hours building the carousel with grid, I have managed to remove the carousel's classes using jQuery.

This is a result for a responsive Bootstrap4 carousel on mobile and tablet but when the screen width is more than 676px it is no longer a carousel.

[codepen][1]

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

Upvotes: 1

jasie
jasie

Reputation: 2444

This is the code you need for a bootstrap carousel: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp

You need different html code because you need the carousel slide class to activate the carousel.

If you are able to change that class dynamically (via PHP, for example), you could solve it with identical code. Depending on the given viewport, you would add the bootstrap classes needed for the carousel. Same goes for the carousel controls etc.

There are different options to check the viewport size in PHP, e.g.: * https://tutbakery.com/how-to-use-media-queries-in-php/ * https://gist.github.com/dcondrey/11342487

Upvotes: 0

Related Questions