Flickity Buttons

Jumpstart has an optional class to alter the appearance of Flickity Slider buttons.

Basic Usage

blog.4.image
blog.5.image
blog.6.image 
<div class="row mb-md-5 mb-4 justify-content-center">
  <div class="col-md-6">
    <div class="buttons-attached" data-flickity='{ "imagesLoaded": true, "wrapAround":true }'>
      <div class="carousel-cell text-center">
        <img class="img-fluid rounded" src="../assets/img/blog/thumb-4.jpg" alt="blog.4.image">
      </div>
      <div class="carousel-cell text-center">
        <img class="img-fluid rounded" src="../assets/img/blog/thumb-5.jpg" alt="blog.5.image">
      </div>
      <div class="carousel-cell text-center">
        <img class="img-fluid rounded" src="../assets/img/blog/thumb-8.jpg" alt="blog.6.image">
      </div>
    </div>
  </div>
</div>
.buttons-attached

Apply class buttons-attached to a [data-flickity] element to pull the buttons inward to cover the current slide