Flickity

Touch, responsive, flickable carousels.

Plugin documentation

...
...
...
... 
<div data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-8.jpg" class="img-fluid" alt="...">
  </div>
</div>

Create a white variation of the navigation buttons with a .flickity-button-white modifier.

...
...
...
... 
<div class="flickity-button-white" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-8.jpg" class="img-fluid" alt="...">
  </div>
</div>

Change the position of the navigation buttons with a .flickity-buttons-inset modifier.

...
...
...
... 
<div class="flickity-button-inset" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="d-block col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-8.jpg" class="img-fluid" alt="...">
  </div>
</div>

Visible overflow

Changes the overflow visibililty of the flickity viewport.

Uses Theme to keep their remote teams from around the world in sync.

Read more

Uses Theme to document their processes for acquiring shows.

Read more

Uses Theme to share their brand assets across their teams.

Read more

Uses Theme to plan their product development with engineering.

Read more

Uses Theme to share financial projections with their investors.

Read more

Uses Theme to plan their priorities for the company quarterly and annually.

Read more 
<div class="flickity-viewport-visible" data-flickity='{"cellAlign": "left", "imagesLoaded": true, "pageDots": false, "prevNextButtons": false, "contain": true}'>
  ...
</div>
Jump to