...

Flickity

Skola 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>

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 Skola to keep their remote teams from around the world in sync.

Read more

Uses Skola to document their processes for acquiring shows.

Read more

Uses Skola to share their brand assets across their teams.

Read more

Uses Skola to plan their product development with engineering.

Read more

Uses Skola to share financial projections with their investors.

Read more

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