vue-carousel-diagonal

Installation

npm install vue-carousel-diagonal

or if you prefer yarn

yarn add vue-carousel

Usage

Global

You may install Vue Carousel Diagonal globally:

import Vue from 'vue';
import VueCarouselDiagonal from 'vue-carousel-diagonal';

Vue.use(VueCarouselDiagonal);

Local

Include the carousel directly into your component using import:

import { CarouselDiagonal } from 'vue-carousel-diagonal';

export default {
  ...
  components: {
    CarouselDiagonal
  }
  ...
};

Example

<template>
  <div id="app">
    <CarouselDiagonal :screens="screens" 
                      :sideWidth="5"
                      :textPrev="'PREV'"
                      style="width: 100vw; height: 100vh;"/>
  </div>
</template>

<script>
  import CarouselDiagonal from 'vue-carousel-diagonal';

  export default {
    name: 'App',
    components: {
      CarouselDiagonal
    },
    data: function() {
      return {
        screens: [
          { title: 'OLED', subtitle: 'Transparent', video: require('./assets/1.mp4') },
          { title: 'OLED', subtitle: 'Cinematic Sound', video: require('./assets/2.mp4') },
          { title: 'OLED', subtitle: 'Rollable', video: require('./assets/3.mp4') },
          { title: 'OLED', subtitle: 'Wallpaper', video: require('./assets/4.mp4') },
        ],
      }
    },
  }
</script>

Demo

Web: https://vue-carousel-diagonal.surge.sh/