5

On large screens I want each carousel slide item to have 3 columns, each with their own content...

enter image description here

<div class="carousel-item active">
   <div class="row">
      <div class="col-sm-4 work">
         <div class="work-inner">
            item 1 content
         </div>
      </div>
      <div class="col-sm-4 work">
         <div class="work-inner">
            item 2 content
         </div>
      </div>
      <div class="col-sm-4 work">
         <div class="work-inner">
            item 3 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->
*more carousel items here*

However, on mobile, I want to reformat the layout and show only one column (divided into carousel items) at a time.

enter image description here

<div class="carousel-item active">
   <div class="row">
      <div class="col-sm-12 work">
         <div class="work-inner">
            item 1 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->

<div class="carousel-item">
   <div class="row">
      <div class="col-sm-12 work">
         <div class="work-inner">
            item 2 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->

<div class="carousel-item">
   <div class="row">
      <div class="col-sm-12 work">
         <div class="work-inner">
            item 3 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->

Currently, the only solution I can think of is to have 2 carousels, and only show the one depending on the screen size using media queries, but I don't know if that's the best way to handle this?

Is there a way I can actively change carousel items responsively, and if so how do I achieve this?

Edit

My current solution is to just remove the columns as the screen space gets smaller (or more accurately add columns as the screen gets bigger). This isn't ideal, though, because mobile users will never see columns 2 & 3.

<div class="carousel-item active">
   <div class="row">
      <div class="col-xs-12 col-md-6 col-lg-4 work">
         <div class="work-inner">
            item 1 content
         </div>
      </div>
      <div class="col-md-6 col-lg-4 d-none d-md-block work">
         <div class="work-inner">
            item 2 content
         </div>
      </div>
      <div class="col-lg-4 d-none d-lg-block work">
         <div class="work-inner">
            item 3 content
         </div>
      </div>
   </div>
</div><!--carousel-item-->
bwoogie
  • 4,339
  • 12
  • 39
  • 72
  • 1
    Similar thread -> https://stackoverflow.com/questions/43599617/show-one-bootstrap-carousel-item-in-mobile You propably have to write custom JS script, Carouse doasn't have built-in features to do this. Some people suggest change carousel to -> https://flickity.metafizzy.co/ – Marek Apr 20 '18 at 14:05
  • Possible duplicate of [Show one Bootstrap carousel item in mobile](https://stackoverflow.com/questions/43599617/show-one-bootstrap-carousel-item-in-mobile) – Marek Apr 20 '18 at 14:06

0 Answers0