Flickity - Touch, responsive, flickable galleries

Flickity makes galleries, sliders, & carousels that feel lively and effortless. You can use Flickity as a jQuery plugin.

Features:

• Physics-based animation
• Touch enable
• Responsive styling
• Full-feature API

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: flickity.metafizzy.co

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="/path/to/flickity.css" media="screen">
<script src="/path/to/flickity.pkgd.min.js"></script>

2. HTML

<div id="main-gallery">
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  <div class="gallery-cell">...</div>
  ...
</div>

3. JAVASCRIPT

$('#main-gallery').flickity({
  // options
  cellAlign: 'left',
  contain: true
});

4. OPTIONS

var flky = new Flickity( '.gallery', {
  // options, defaults listed

  accessibility: true,
  // enable keyboard navigation, pressing left & right keys

  autoPlay: false,
  // advances to the next cell
  // if true, default is 3 seconds
  // or set time between advances in milliseconds
  // i.e. `autoPlay: 1000` will advance every 1 second

  cellAlign: 'center',
  // alignment of cells, 'center', 'left', or 'right'
  // or a decimal 0-1, 0 is beginning (left) of container, 1 is end (right)

  cellSelector: undefined,
  // specify selector for cell elements

  contain: false,
  // will contain cells to container
  // so no excess scroll at beginning or end
  // has no effect if wrapAround is enabled

  draggable: true,
  // enables dragging & flicking

  freeScroll: false,
  // enables content to be freely scrolled and flicked
  // without aligning cells

  friction: 0.2,
  // smaller number = easier to flick farther

  imagesLoaded: false,
  // if imagesLoaded is present, Flickity can re-position cells
  // once images are loaded

  initialIndex: 0,
  // zero-based index of the initial selected cell

  percentPosition: true,
  // sets positioning in percent values, rather than pixels
  // Enable if items have percent widths
  // Disable if items have pixel widths, like images

  prevNextButtons: true,
  // creates and enables buttons to click to previous & next cells

  pageDots: true,
  // create and enable page dots

  resizeBound: true,
  // listens to window resize events to adjust size & positions

  watchCSS: false,
  // watches the content of :after of the element
  // activates if #element:after { content: 'flickity' }
  // IE8 and Android 2.3 do not support watching :after
  // set watch: 'fallbackOn' to enable for these browsers

  wrapAround: false
  // at end of cells, wraps-around to first for infinite scrolling

});