jQuery适合移动设备触摸屏的响应式幻灯片插件 A Touch, responsive, flickable galleries

Cell style

All sizing and styling of the cells are handled by your own CSS.

/* cells will take up entire width of container */
		.gallery-cell {
		  width: 100%;
		  height: 140px;
		}
		
/* half-width cells with margin */
		.gallery-cell {
		  width: 50%;
		  height: 140px;
		  margin-right: 10px;
		}
		

Cells can be different sizes. You can use any unit you like: percent, pixels, etc.

.gallery-cell {
		  width: 33%;
		  height: 140px;
		  margin-right: 10px;
		}
		.gallery-cell.size-180 { width: 180px; }
		.gallery-cell.size-large { width: 75%; }
		

You can use media queries to show different number of cells for different breakpoints.

.gallery-cell {
		  width: 100%;
		  height: 140px;
		  margin-right: 2%;
		}

		@media screen and ( min-width: 768px; ) {
		  /* show 2 cells for larger devices */
		  .gallery-cell { width: 49%; }
		}
		

Previous & next buttons

Style and position previous & next buttons with CSS.

/* big buttons, no circle */
		.flickity-prev-next-button {
		  width: 100px;
		  height: 100px;
		  background: transparent;
		}
		/* arrow color */
		.flickity-prev-next-button .arrow {
		  fill: white;
		}
		.flickity-prev-next-button.no-svg {
		  color: white;
		}
		/* hide disabled button */
		.flickity-prev-next-button:disabled {
		  display: none;
		}
		
/* smaller, dark, rounded square */
		.flickity-prev-next-button {
		  width: 30px;
		  height: 30px;
		  border-radius: 5px;
		  background: #333;
		}
		/* arrow color */
		.flickity-prev-next-button .arrow {
		  fill: white;
		}
		.flickity-prev-next-button.no-svg {
		  color: white;
		}
		/* position outside */
		.flickity-prev-next-button.previous {
		  left: -40px;
		}
		.flickity-prev-next-button.next {
		  right: -40px;
		}
		

Options

cellAlign

Align cells within the gallery element.

  • Values: 'center', 'left', 'right'
  • Default: 'center'
cellAlign: 'left'
		
// default 'center'
		
cellAlign: 'right'
		

wrapAround

At the end of cells, wrap-around to the other end for infinite scrolling.

  • Values: true, false
  • Default: false
wrapAround: true
		

contain

Contains cells to gallery element to prevent excess scroll at beginning or end. Has no effect if wrapAround: true.

  • Values: true, false
  • Default: false
contain: true
		

freeScroll

Enables content to be freely scrolled and flicked without aligning cells to an end position.

  • Values: true, false
  • Default: false
freeScroll: true
		

Enable freeScroll and contain for a simple horizontal scroller.

freeScroll: true,
		contain: true,
		// disable previous & next buttons and dots
		prevNextButtons: false,
		pageDots: false
		

Enable freeScroll and wrapAround and you can flick forever, man.

freeScroll: true,
		wrapAround: true
		

autoPlay

Automatically advances to the next cell. Delay is 3 seconds if autoPlay: true. Set delay time in milliseconds, for example autoPlay: 1500 will advance every 1.5 seconds.

Auto-playing will pause when mouse is hovered over, and resume when mouse is hovered off. Auto-playing will stop when the gallery is clicked or a cell is selected.

  • Values: true, false, Integer
  • Default: false
autoPlay: true
		

watchCSS

You can enable and disable Flickity with CSS. watchCSS option watches the content of :after of the gallery element. Flickity is enabled if :after content is 'flickity'.

IE8 and Android 2.3 do not support watching :after. Flickity will be disabled when watchCSS: true. Set watchCSS: 'fallbackOn' to enable Flickity for these browsers.

  • Values: true, false, 'fallbackOn'
  • Default: false
watchCSS: true
		
/* enable Flickity by default */
		.gallery:after {
		  content: 'flickity';
		  display: none; /* hide :after */
		}

		@media screen and ( min-width: 768px ) {
		  /* disable Flickity for large devices */
		  .gallery:after {
		    content: '';
		  }
		}
		

Images

Flickity makes beautiful image galleries.

<div class="gallery js-flickity"
		  data-flickity-options='{ "imagesLoaded": true, "percentPosition": false }'>
		  <img src="orange-tree.jpg" alt="orange tree" />
		  <img src="submerged.jpg" alt="submerged" />
		  <img src="look-out.jpg" alt="look-out" />
		  ...
		</div>
		

imagesLoaded

Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded.

  • Values: true, false
  • Default: false
imagesLoaded: true
		

This option requires you to include imagesLoaded on your site.

<script src="/path/to/imagesloaded.pkgd.js"></script>
		

This option may not work with RequireJS or Browserify for Flickity beta.

Other options

Defaults shown.

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

		cellSelector: undefined,
		// specify selector for cell elements

		draggable: true,
		// enables dragging & flicking

		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

		pageDots: true,
		// enables page dots

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

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

		rightToLeft: false
		// enables right-to-left ordering for right-to-left languages
		

Previous & next buttons

Style and position previous & next buttons with CSS.

/* big buttons, no circle */
		.flickity-prev-next-button {
		  width: 100px;
		  height: 100px;
		  background: transparent;
		}
		/* arrow color */
		.flickity-prev-next-button .arrow {
		  fill: white;
		}
		.flickity-prev-next-button.no-svg {
		  color: white;
		}
		/* hide disabled button */
		.flickity-prev-next-button:disabled {
		  display: none;
		}
		
/* smaller, dark, rounded square */
		.flickity-prev-next-button {
		  width: 30px;
		  height: 30px;
		  border-radius: 5px;
		  background: #333;
		}
		/* arrow color */
		.flickity-prev-next-button .arrow {
		  fill: white;
		}
		.flickity-prev-next-button.no-svg {
		  color: white;
		}
		/* position outside */
		.flickity-prev-next-button.previous {
		  left: -40px;
		}
		.flickity-prev-next-button.next {
		  right: -40px;
		}
		

Page dots

Style and position page dots with CSS.

/* position dots in gallery */
		.flickity-page-dots {
		  bottom: 0px;
		}
		/* white circles */
		.flickity-page-dots .dot {
		  width: 12px;
		  height: 12px;
		  opacity: 1;
		  background: transparent;
		  border: 2px solid white;
		}
		/* fill-in selected dot */
		.flickity-page-dots .dot.is-selected {
		  background: white;
		}
		
/* position dots up a bit */
		.flickity-page-dots {
		  bottom: -22px;
		}
		/* dots are lines */
		.flickity-page-dots .dot {
		  height: 4px;
		  width: 40px;
		  margin: 0;
		  border-radius: 0;
		}