Flickity

Landkit only

Touch, responsive, flickable carousels.

Plugin documentation

...
...
...
...
<div data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="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="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="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="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-5.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-6.jpg" class="img-fluid" alt="...">
  </div>
  <div class="col-12 col-md-4 px-1">
    <img src="../assets/img/covers/cover-7.jpg" class="img-fluid" alt="...">
  </div>
  <div class="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 Landkit to keep their remote teams from around the world in sync.

Read more

Uses Landkit to document their processes for acquiring shows.

Read more

Uses Landkit to share their brand assets across their teams.

Read more

Uses Landkit to plan their product development with engineering.

Read more

Uses Landkit to share financial projections with their investors.

Read more

Uses Landkit 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