@rainmakerdigital/vue-vista-carousel v1.0.5

Owl Carousel for VISTA.canvas 2.0

Introduction

This project provides the owl carousel jQuery plugin for VISTA.canvas 2.0

This component is based on the work of the JQuery Owl Carousel library with some additional modifications by rainmaker for data-driven content.

Installing

The component can be installed using npm and sourcing from rainmaker's private repository.

npm i @rainmakerdigital/vue-vista-carousel

Usage

The component can be included in to VueJS either in the main file or at page level as follows:

import Vue from 'vue'
import VistaCarousel from '@rainmakerdigital/vue-vista-carousel'

Vue.use(VistaCarousel)

To make use of the component place a tag similar to this on the page:

<template>
  <vue-vista-carousel :autoplay="true" :nav="false" :data="data" items="1" style="width:800px; height:800px"></vue-vista-carousel>
</template>

<script>
export default {
  name: 'Demo',
  data () {
      return {
          data: [
              {
                  img: {
                      src: 'https://placeimg.com/800/800/any?5'
                  }
              },
              {
                  img: {
                      src: 'https://placeimg.com/800/800/any?6'
                  }
              },
              {
                  iframe: {
                      src: 'https://placeimg.com/800/800/any?7',
                      frameborder: "0",
                      height: "800",
                      width: "800",
                      scrolling: "no"
                  }
              }
          ]
      }
  },
}
</script>

Parameters

The component accepts any type of element ('div', 'a', 'i', 'img' etc) with attributes as specified by an object array.

Additionally the following options are available.

(More to come)

• items

type : number

default : 3

The number of items you want to see on the screen.

• margin

type : number

default : 0

Margin-right (px) on item.

• loop

type : boolean

default : false

Infinity loop. Duplicate last and first items to get loop illusion.

• center

Type: Boolean

Default: false

Center item. Works well with even an odd number of items.

• nav

Type: Boolean

Default: false

Show next/prev buttons.

• autoplay

Type: Boolean

Default: false

Autoplay.

• autoplaySpeed

Type: Number/Boolean

Default: false

Autoplay speed.

• rewind

Type: Boolean

Default: true

Go backwards when the boundary has reached.

• mouseDrag

Type: Boolean

Default: true

Mouse drag enabled.

• touchDrag

Type: Boolean

Default: true

Touch drag enabled.

• pullDrag

Type: Boolean

Default: true

Stage pull to edge.

• freeDrag

Type: Boolean

Default: false

Item pull to edge.

• stagePadding

Type: Number

Default: 0

Padding left and right on stage (can see neighbours).

• autoWidth

Type: Boolean

Default: false

Set non grid content. Try using width style on divs.

• autoHeight

Type: Boolean

Default: false

Set non grid content. Try using height style on divs.

• dots

Type: Boolean

Default: true

Show dots navigation.

• autoplayTimeout

Type: Number

Default: 5000

Autoplay interval timeout.

• autoplayHoverPause

Type: Boolean

Default: false

Pause on mouse hover.

• responsive

Type: Object

Default: {}

Example : :responsive="{0:{items:1,nav:false},600:{items:3,nav:true}}"

Object containing responsive options. Can be set to false to remove responsive capabilities.