vue-flipster

Vue Flipster

Vue wrapper for coverflow library, jquery-flipster.

Requires jquery. 😕

See the jquery-flipster demo here

Example

<cover-flow 
    :loop="true" 
    :autoplay="4000" 
    theme="flat" 
    :spacing="0" 
    :buttons="true"
>
    <cover-flow-slide>
        <img src="http://via.placeholder.com/500x500">
    </cover-flow-slide>
    <cover-flow-slide>
        <img src="http://via.placeholder.com/500x500">
    </cover-flow-slide>
    <cover-flow-slide>
        <img src="http://via.placeholder.com/500x500">
    </cover-flow-slide>
    <cover-flow-slide>
        <img src="http://via.placeholder.com/500x500">
    </cover-flow-slide>
    <cover-flow-slide>
        <img src="http://via.placeholder.com/500x500">
    </cover-flow-slide>
</cover-flow>

Installation

  npm install vue-flipster --save 
 
  // or
 
  yarn add vue-flipster

  import {CoverFlow, CoverFlowSlide} from 'vue-flipster'
  
  Vue.component('CoverFlow', CoverFlow)
  Vue.component('CoverFlowSlide', CoverFlowSlide)

You should also be sure you require jquery, jquery.flipster, and jquery.flipster css in your project.

   Wherever you bootstrap your application
   require('jquery')
   require('jquery.flipster')

   In your css build process
   @import('path/to/node_modules/jquery.flipster/dist/jquery.flipster.css');

Installing without a build process

See demo/index.html for use basic script file based setup.

Options

All jquery-flipster options have matching props with the exception of item-container and item-selector, which are decided by the plugin.

The style option prop has been changed to theme to avoid conflict with the DOM style attribute.

      // ['center'|number]
      // Zero based index of the starting item, or use 'center' to start in the middle
      start: {
        default() {
          return 'center'
        }
      },
      // [milliseconds]
      // Speed of the fade in animation after items have been setup
      fadeIn: {
        default() {
          return 400
        }
      },
      // [true|false]
      // Loop around when the start or end is reached
      loop: {
        default() {
          return false
        }
      },
      // [false|milliseconds]
      // If a positive number, Flipster will automatically advance to next item after that number of milliseconds
      autoplay: {
        default() {
          return false
        }
      },
      // [true|false]
      // If true, autoplay advancement will pause when Flipster is hovered
      pauseOnHover: {
        default() {
          return true
        }
      },
      // [coverflow|carousel|flat|...]
      // Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
      // Create your own theme in CSS and use this setting to have Flipster add the custom class
      theme: {
        default() {
          return 'coverflow'
        }
      },
      // [number]
      // Space between items relative to each item's width. 0 for no spacing, negative values to overlap
      spacing: {
        default() {
          return -0.6
        }
      },
      // [true|false]
      // Clicking an item switches to that item
      click: {
        default() {
          return true
        }
      },
      // [true|false]
      // Enable left/right arrow navigation
      keyboard: {
        default() {
          return true
        }
      },
      // [true|false]
      // Enable mousewheel/trackpad navigation; up/left = previous, down/right = next 
      scrollwheel: {
        default() {
          return true
        }
      },
      // [true|false]
      // Enable swipe navigation for touch devices
      touch: {
        default() {
          return true
        }
      },
      // [true|false|'before'|'after']
      // If not false, Flipster will build an unordered list of the items
      // Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items
      nav: {
        default() {
          return false
        }
      },
      // [true|false|'custom']
      // If true, Flipster will insert Previous / Next buttons with SVG arrows
      // If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`
      buttons: {
        default() {
          return true
        }
      },
      // [text|html]
      // Changes the text for the Previous button
      buttonPrev: {
        default() {
          return 'Previous'
        }
      },
      // [text|html]
      // Changes the text for the Next button
      buttonNext: {
        default() {
          return 'Next'
        }
      }

Events

switch: The slide has changed.