Flickity Slider

Slider use for date selection

by manoj_antony32

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/flickity@2/dist/flickity.css">
<h1>Flickity - select cell on staticClick,  jQuery</h1>

<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

CSS

/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #FAFAFA;
}

.carousel-cell {
  width: 20%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

JavaScript

// external js: flickity.pkgd.js

var $carousel = $('.carousel').flickity();

$carousel.on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {
  if ( typeof cellIndex == 'number' ) {
    $carousel.flickity( 'selectCell', cellIndex );
  }
});