Views Flipster

Views Flipster module integrates the jQuery.Flipster library with Drupal Views module to replicate gorgeous Flipster effects.

Features

This CSS3 3D transform-based jQuery plugin is:

• Responsive: From desktop to mobile, Flipster automatically centers and scales to fit the area provided.
• Lightweight: Javascript and CSS combined are only 5kb gzipped (13kb uncompressed).
• Touch/Scrollwheel/Trackpad/Keyboard Friendly: Swipe on touch devices, scroll via trackpad or mousewheel, and use your arrow keys to fly through items!
• Flexible: Flip an image gallery or any HTML content. Links and dynamic content work great!
• Customizable: Four built in styles (Coverflow, Carousel, Wheel and Flat).

Installation

1. Download the 'Views Flipster' module archive. Extract and place it in the root modules directory i.e. /modules
2. Ensure you have these below modules enabled:
   • Drupal 8 - Field UI (part of core)
   • Drupal 8 - Image (part of core)
   • Drupal 8 - Views, Views UI (part of core)
   • Drupal 8 - Libraries API
3. Create a libraries directory in the root if not already there i.e. /libraries
4. Create a flipster directory inside it i.e. /libraries/flipster
5. Download jQuery Flipster library from https://github.com/drien/jquery-flipster
6. Extract and copy the minified files from its dist folder.
7. Place the copied minified files to the /libraries/flipster diectory
8. Ensure you have the minified files with path similar to:
   • /libraries/flipster/jquery.flipster.min.css
   • /libraries/flipster/jquery.flipster.min.js
9. Enable the 'Views Flipster' module

Views Flipster Setup

1. Create a new Content Type with an image field (set max of 1 image upload per node).
2. Add some nodes of this type with their images.
3. Create a new view (block or page display) of this content type. Add the image field you created earlier in the Fields section.
4. Select the Views Format as 'Flipster'. In Settings, default style is set to 'Coverflow'. You have 3 more options besides it - Carousel, Wheel and, Flat.
5. Try each one of the four styles for your visual delight.

Demo

Try out a demonstration