CODEWITHSUNDEEP
twitter-bootstrapcss
SpaceX
SpaceX

Reputation: 2890

Multiple carousel's in cards not working bootstrap v4

I am using cards of bootstrap v4 (alpha), I would like to have carousel in each card as shown in the below image. Unfortunately, the carousel in card 2 doesn't seem to work.

carousels inside cards

All the cards are wrapped inside a div with class="card-columns", I would like use to use this class only, since the cards styling is appropriate for my requirement. I am not interested in other bootstrap alternatives such as class="card-deck" or class="card-group" which don't meet my styling need.

Please find the JS fiddle link to the code and also find the code below.

Can someone please suggest how I can make carousels work on multiple cards without effecting the cards styling.

Here is related styling for cards from bootstap v4 css if it helps.

.card-columns {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3;
    -webkit-column-gap: 1.25rem;
       -moz-column-gap: 1.25rem;
            column-gap: 1.25rem;
  }
  .card-columns .card {
    display: inline-block;
    width: 100%;
  }

Html code below:

<div class="container">

<div class="card-columns">

  <div class="card">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img style="width=100%;" src="https://www.ricoh.com/r_dc/caplio/r7/img/sample_04.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="http://2.bp.blogspot.com/-r1thEkTLZ8w/UUnTEQ0zINI/AAAAAAAAAJI/JbgDSvuhFSA/s1600/IMG_1211.JPG" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_(JPEG-HDR).jpg" alt="Third slide">
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="card-block">
      <h4 class="card-title">Card 1</h4>
    </div>
  </div>


 <div class="card">
    <div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic1" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic1" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img style="width=100%;" src="http://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="http://www.bestmanspeechestoasts.com/wp-content/themes/thesis/rotator/sample-4.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img style="width=100%;" src="https://blog.cloudflare.com/content/images/1.jpg.scaled500.jpg" alt="Third slide">
        </div>
      </div>
      <a class="left carousel-control" href="#carousel-example-generic1" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic1" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

    <div class="card-block">
      <h4 class="card-title">Card 2</h4>
    </div>
  </div>

</div>
</div>

Upvotes: 0

Views: 4061

Answers (1)

user1575941
user1575941

Reputation:

This is browser bug! (Exclamation mark is because I work on this for 2h with no luck and then perchance opened another browser.)

Your Fiddle works in OSX -> Safari and in OSX -> Firefox, but does not work in OSX -> Chrome. (Sorry, not tried Windows browsers.)

It can be confirmed by resizing the Chrome window smaller (so that it's mobile phone width and the cards stack on top of each other) - then the carousels work.

Upvotes: 2

Related Questions