Integrate Flickity With Bootstrap 4 Carousel

Integrate Flickity With Bootstrap 4 Carousel

I start using Bootstrap 4 yesterday, and I exploring Flickity last week. Now I just try to integrate Flickity with my Bootstrap 4 using the quick Bootrap 4 examples and I’m using the carousel. But when I add the Flickity with the built-in carousel the following has been dis-arranged, mis-aligned or any called with it. But I want to use the existing designs of the Bootstrap 4 example carousel not even using the Flickity carousel controller I just need to add Flickity to add touch, reponsive, and flickible carousels. The following codes I used below.

/* GLOBAL STYLES
————————————————– */

/* Padding below the footer and lighter body text */

body {
padding-top: 3rem;
padding-bottom: 3rem;
color: #5a5a5a;
}

/* CUSTOMIZE THE CAROUSEL
————————————————– */

/* Carousel base class */

.carousel {
margin-bottom: 4rem;
}

/* Since positioning the image, we need to help out the caption */

.carousel-caption {
z-index: 10;
bottom: 3rem;
}

/* Declare heights because of positioning of img element */

.carousel-item {
height: 32rem;
background-color: #777;
}

.carousel-item>img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 32rem;
}

/* MARKETING CONTENT
————————————————– */

Related:  Destroy All Bootstrap Tooltips in A Div

/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {
margin-bottom: 1.5rem;
text-align: center;
}

.marketing h2 {
font-weight: normal;
}

.marketing .col-lg-4 p {
margin-right: .75rem;
margin-left: .75rem;
}

/* Featurettes
————————- */

.featurette-divider {
margin: 5rem 0;
/* Space out the Bootstrap


more */
}

/* Thin out the marketing headings */

.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -.05rem;
}

/* RESPONSIVE CSS
————————————————– */

@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}

@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}


Solutions/Answers:

Solution 1:

I made an issue at Metafizzy Flickity Github repository to ask the owner Mr. Desandro about the problem in integrating Flickity with Bootstrap 4 carousel.

Then he replied:

“we cannot use both Bootstrap carousel and Flickity at the same time. They are two separate solutions for the same feature. I recommend you choose either one or the other. You can use some of the interior carousel Bootstrap CSS like carousel-caption within a Flickity carousel.”

Then he gave the following demonstration located at Codepen. The copy of the code is found below.

.carousel-cell {
  width: 100%;
  height: 400px;
  background: #777;
  position: relative;
}

.carousel-cell .container {
  height: 100%;
}
<link href="https://unpkg.com/flickity@2/dist/flickity.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<div class="flickity-carousel" data-flickity='{ "autoPlay": true }'>
  <div class="carousel-cell">
    <div class="container">
      <div class="carousel-caption d-md-block text-left">
        <h1>Example headline.</h1>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="container">
      <div class="carousel-caption d-md-block">
        <h1>Another example headline.</h1>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
      </div>
    </div>
  </div>
  <div class="carousel-cell">
    <div class="container">
      <div class="carousel-caption d-md-block text-right">
        <h1>One more for good measure.</h1>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
      </div>
    </div>
  </div>
</div>

References

Related:  Bootstrap: tr class “warning” doesn't work in striped-table