Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster

Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster
File Size: 76.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

flipster is an amazing and touch-enabled jquery plugin that allows you to create an image Cover Flow effect with CSS3 3D transform and flipping effects. It will fall back to be flat and boring in those browsers which don't support CSS3 3D transform, like IE7, IE8, IE9.

You may also like:

How to use it :

1. Include the latest jQuery library and flipster on your web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="./jquery.flipster.js"></script>

2. The CSS

.flipster {
  overflow: hidden;
  width: 100%;
  display: none;
}

.flipster > ul {
  padding-top: 2.5%;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: all 333ms;
  -moz-transition: all 333ms;
  transition: all 333ms;
  position: relative;
  height: 1000px;
}

.flipster li {
  display: block;
  -webkit-transition: all 333ms ease-in-out;
  -moz-transition: all 333ms ease-in-out;
  transition: all 333ms ease-in-out;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  perspective: 800px;
  position: absolute;
  width: 20%;
  opacity: 0.99; /* fix for strange clipping behavior on rotated elements in chrome. don't know why this works */
}

.flipster li img {
  width: 100%;
  display: block;
}

.flipster li > div {
  -webkit-transition: all 500ms;
  -ms-transition: all 500ms;
  transition: all 500ms;
  background-color: #000000;
  -webkit-box-shadow: 0px 0px 5% #000000;
  -moz-box-shadow: 0px 0px 5% #000000;
  -ms-box-shadow: 0px 0px 5% #000000;
  box-shadow: 0px 0px 15px #000000;
  -webkit-box-reflect: below 1px -webkit-gradient( linear, left bottom, left top, color-stop(0.10, rgba(255,255,255,0.3)), color-stop(0.50, transparent));
  width: 100%;
}

.no-transition {
  -webkit-transition: all 0ms !important;
  -moz-transition: all 0ms !important;
  transition: all 0ms !important;
}

.flipster .flipster-left > div {
  -webkit-transform: rotateY(60deg);
  -moz-transform: rotateY(60deg);
  -ms-transform: rotateY(60deg);
  transform: rotateY(60deg);
}

.flipster .flipster-right > div {
  -webkit-transform: rotateY(-60deg);
  -moz-transform: rotateY(-60deg);
  transform: rotateY(-60deg);
  -ms-transform: rotateY(-60deg);
}

.flipster .flipster-current>div {
  -webkit-transform: rotateY(0deg) translate3d(0, 0, 150px);
  -moz-transform: rotateY(0deg) translate3d(0, 0, 150px);
  -ms-transform: rotateY(0deg) translate3d(0, 0, 150px);
  transform: rotateY(0deg) translate3d(0, 0, 150px);
}

/* Old browser compatibility classes */

.compatibility { }

3. The HTML

<div class="coverflow">
<ul>
<li>
<div> <img src="http://lorempixel.com/200/200/sports/1"> </div>
</li>
<li>
<div> <img src="http://lorempixel.com/200/200/sports/2"> </div>
</li>
<li>
...
</ul>
</div>

4. Call the plugin with default options.

$(document).ready( function() {
$(".coverflow").flipster();
});

5. Options and defaults.

itemContainer:    'ul', // Container for the flippin' items.
itemSelector:     'li', // Selector for children of itemContainer to flip
style:'coverflow', // Switch between 'coverflow' or 'carousel' display styles
start:'center', // Starting item. Set to 0 to start at the first, 'center' to start in the middle or the index of the item you want to start with.

enableKeyboard:   true, // Enable left/right arrow navigation
enableMousewheel: true, // Enable scrollwheel navigation (up = left, down = right)
enableTouch:      true, // Enable swipe navigation for touch devices

enableNav:        false, // If true, flipster will insert an unordered list of the slides
enableNavButtons: false, // If true, flipster will insert Previous / Next buttons

onItemSwitch:     $.noop, // Callback function when items are switches
disableRotation:  false,

navPosition:      'before', // [before|after] Changes the position of the navigation before or after the flipsterified items - case-insensitive

prevText:         'Previous',       // Changes the text for the Previous button
nextText:         'next'// Changes the text for the Next button

Change logs:

1.1.1 (2017-07-29)

  • mouse wheel fix for Mozilla Firefox

1.1.0 (2016-03-04)

  • Fix for maximum callstack errors when not visible.

1.0.1 (2015-11-03)

  • Fixed a bug where the navigation children have incorrect active class

1.0.0 (2015-10-24)

  • added namespace to window resize event
  • Wheel theme fix

0.3.4 (2014-07-24)

  • Some additional options available
  • Cleaned up code and normalized whitespace
  • Added Grunt support for minifying css and js for distribution

0.3.1 (2013-07-28)

  • Added new Carousel style! Shows 5 items at a time in a looping carousel
  • Added itemContainer, itemSelector, style, and start options for basic configuration
  • Added enableKeyboard, enableMousewheel, and enableTouch options to enable/disable features
  • Added enableNav and enableNavButtons options to insert controls into the container
  • Added onItemSwitch callback
  • Better demos

0.2.0 (2013-06-28)

  • Added automatic height adjustment for the container element, which used to just overflow.
  • A few minor code improvements.
  • Added minified versions of the js and css files.

 


This awesome jQuery plugin is developed by drien. For more Advanced Usages, please check the demo page or visit the official website.