Responsive & Flickable Carousels Content Slider Plugin | flickity

content-flickity-slider

Flickity is a flexible jQuery slider plugin for creating touch-responsive content sliders/galleries/sliders/carousels with animations and full-featured APIs.

content slider html, content slider javascript, flickity slider responsive, responsive slider jquery free download with demo

How to make use of it:

Install & Download:

# NPM
$ npm install flickity --save

1. Include flickity, CSS, and JavaScript in the document.

<!-- from local -->
<link href="dist/flickity.min.css" rel="stylesheet">
<script src="dist/flickity.pkgd.min.js"></script>
<!-- OR from a CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/flickity.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flickity.pkgd.min.js"></script>

2. Include the jQuery library in the document.

<script src="/path/to/cdn/jquery.min.js"></script>

3. Include your content in the slider as follows:

<div class="carousel">
  <div class="carousel-cell">Slide 1</div>
  <div class="carousel-cell">Slide 2</div>
  <div class="carousel-cell">Slide 3</div>
  ... More Slides Here ...
</div>

4. Add the data-flickity attribute to the top container to configure the carousel.

<div class="carousel" data-flickity='{ options here }'>
  <div class="carousel-cell">Slide 1</div>
  <div class="carousel-cell">Slide 2</div>
  <div class="carousel-cell">Slide 3</div>
  ... More Slides Here ...
</div>

5. Initialize the library with JavaScript / jQuery.

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

6. Configure the slider with vanilla JavaScript.

// jQuery
$('.carousel').flickity({
  // options here
});

// Vanilla JS
var myCarousel = new Flickity( '.carousel', {
  // options here
});

7. Configure the circular slider that bypasses the Options object to Flickity.

$('.carousel').flickity({

  // enable keyboard navigation
  accessibility: true,

  // make the carousel's height fit the selected slide
  adaptiveHeight: false,

  // enable auto play
  // set delay time to enable the autoplay
  // e.g. autoPlay: 5000
  autoPlay: false,

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

  // cell selector
  cellSelector: undefined,

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

  // enable dragging & flicking when the slides > 1
  draggable: '>1',

  // the number of pixels a user must scroll horizontally to start dragging
  dragThreshold: 3,

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

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

  // group cells together in slides
  groupCells: false,

  // enable image lazy load
  // you can specify the original img src in the data-flickity-lazyload attribute
  lazyLoad: true,

  // intial slide
  initialIndex: 0,

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

  // enable next/prev buttons
  prevNextButtons: true,

  // enable pagination dots
  pageDots: true,

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

  // enable RTL support
  rightToLeft: false,

  // set the height of the gallery
  setGallerySize: true,

  // 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
  watchCSS: false,

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

});

8. API methods.

// jQuery
// $carousel.flickity('methodName', parameters);
// Vanilla
// myCarousel.methodName(parameters);

// go to a specific slide
$carousel.flickity( 'select', index, isWrapped, isInstant );

// go to the previous slide
$carousel.flickity( 'previous', isWrapped, isInstant );

// go to the next slide
$carousel.flickity( 'next', isWrapped, isInstant );

// select a slide
$carousel.flickity( 'selectCell', value, isWrapped, isInstant );

// resize & re-position the carousel
$carousel.flickity('resize');
$carousel.flickity('reposition');

// add more slides
$carousel.flickity( 'prepend', elements );
$carousel.flickity( 'append', elements );

// insert a slide
$carousel.flickity( 'insert', elements, index );

// remove a slide
$carousel.flickity( 'remove', elements );

// enable/disable/pause/resume autoplay
$carousel.flickity('playPlayer');
$carousel.flickity('stopPlayer');
$carousel.flickity('pausePlayer')
$carousel.flickity('unpausePlayer');

// set the carousel to fullscreen
$carousel.flickity('viewFullscreen');

// exit the fullscreen mode
$carousel.flickity('exitFullscreen');

// toggle the fullscreen mode
$carousel.flickity('toggleFullscreen');

// destroy the plugin
$carousel.flickity('destroy');

// reload all slides
$carousel.flickity('reloadCells');

// get the elements of the slide
var cellElements = $carousel.flickity('getCellElements');

9. Event handlers.

// jQuery
// $carousel.on('eventName', function);
// $carousel.off('eventName', function);
// $carousel.once('eventName', function);
// Vanilla
// myCarousel.on('eventName', function);
// myCarousel.off('eventName', function);
// myCarousel.once('eventName', function);

$carousel.on( 'ready.flickity', function() {
  // on ready
});

$carousel.on( 'change.flickity', function( event, index ) {
  // on change
});

$carousel.on( 'select.flickity', function( event, index ) {
  // when a slide is selected
});

$carousel.on( 'settle.flickity', function( event, index ) {
  // when the carousel is settled at its end position
});

$carousel.on( 'scroll.flickity', function( event, progress ) {
  // on move
});

$carousel.on( 'dragStart.flickity', function( event, pointer ) {
  // on drag start
});

$carousel.on( 'dragMove.flickity', function( event, pointer, moveVector ) {
  // on drag move
});

$carousel.on( 'dragEnd.flickity', function( event, pointer ) {
  // on drag end
});

$carousel.on( 'pointerDown.flickity', function( event, pointer ) {
  // when the user's pointer (mouse, touch, pointer) presses down
});

$carousel.on( 'pointerMove.flickity', function( event, pointer, moveVector ) {
  // when the user's pointer moves.
});

$carousel.on( 'pointerUp.flickity', function( event, pointer ) {
  // when the user's pointer unpresses
});

$carousel.on( 'staticClick.flickity', function( event, pointer, cellElement, cellIndex ) {
  // when the user's pointer is pressed and unpressed and has not moved enough to start dragging
});

$carousel.on( 'lazyLoad.flickity', function( event, cellElement ) {
  // after an image has been loaded
});

$carousel.on( 'bgLazyLoad.flickity', function( event, element ) {
  // after a background image has been loaded
});

$carousel.on( 'fullscreenChange.flickity', function( event, isFullscreen ) {
  //  after entering or exiting fullscreen mode
});

Responsive & Flexible Content Slider Plugin, flickity github slider


See Demo And Download

Official Website(metafizzy): Click Here

This superior jQuery/javascript plugin is developed by metafizzy. For extra Advanced Usage, please go to the official website.

Share