Awesome

vue-concise-carousel

Vue Concise Carousel is SSR and CSR friendly. An upgraded version from vue-carousel

Full examples

Table of Contents

• Installation
• Usage
• Configuration
• Events
• Methods
• Slots
• Development
• License

Installation

npm install @jambonn/vue-concise-carousel

or if you prefer yarn

yarn add @jambonn/vue-concise-carousel

Usage

Global

You may install Vue Concise Carousel globally:

import Vue from 'vue';
import VueConciseCarousel from '@jambonn/vue-concise-carousel';
import '@jambonn/vue-concise-carousel/dist/vue-concise-carousel.css'

Vue.component('carousel', VueConciseCarousel.Carousel);
Vue.component('slide', VueConciseCarousel.Slide);

This will make <carousel> and <slide> available to all components within your Vue app.

Local

Include the carousel directly into your component using import:

import { Carousel, Slide } from '@jambonn/vue-concise-carousel';
import '@jambonn/vue-concise-carousel/dist/vue-concise-carousel.css'

export default {
  ...
  components: {
    Carousel,
    Slide
  }
  ...
};

Configuration

Events

Lowercase versions of the above events are also emitted, namely—pagechange, slideclick, transitionstart and transitionend.

HTML Structure

Once the Carousel and Slide components are installed globally or imported, they can be used in templates in the following manner:

  <Carousel :per-page="1" :navigate-to="someLocalProperty" :mouse-drag="false">
    <Slide>
      Slide 1 Content
    </Slide>
    <Slide>
      Slide 2 Content
    </Slide>
  </Carousel>

To listen for the 'slideclick' event you can do the following:

  <Carousel>
    <Slide
        data-index="0"
        data-name="MySlideName"
        @slideclick="handleSlideClick">
      Slide 1 Content
    </Slide>
    ...
  </Carousel>

  handleSlideClick (dataset) => {
    console.log(dataset.index, dataset.name)
  }

Methods

Calling Methods

<template>
  <Carousel ref="carousel">
    <Slide>
      Slide 1 Content
    </Slide>
    <Slide>
      Slide 2 Content
    </Slide>
  </Carousel>
  <button @click="showNext">show me the next</button>
</template>
<script>
  export default {
    methods: {
      showNext() {
        this.$refs.carousel.handleNavigation('forward')
      },
    },
  }
</script>

All Methods

Slots

Customizing Navigation & Pagination

<template>
  <Carousel ref="carousel" @page-change="handlePageChange">
      <Slide>
        Slide 1 Content
      </Slide>
      <Slide>
        Slide 2 Content
      </Slide>
      <div class="custom-navigation" slot="navigation">
        <button type="button" :disabled="currentPage > 0" @click="onChangeNavigation('backward')">Back</button>
        <button type="button" :disabled="!isEnableForward" @click="onChangeNavigation('forward')">Next</button>
      </div>
      <ul class="custom-pagination" slot="pagination">
        <li @click="onChangePagination(1)">1</li>
        <li @click="onChangePagination(2)">2</li>
      </ul>
  </Carousel>
</template>
<script>
  export default {
    data() {
      return {
        currentPage: 0,
        isEnableForward: true,
      }
    },
    methods: {
      handlePageChange(currentPage) {
        this.currentPage = currentPage
        this.isEnableForward = this.$refs.carousel.canAdvanceForward
      },
      onChangePagination(index) {
        this.$refs.carousel.goToPage(index, 'pagination')
      },
      onChangeNavigation(direction) {
        this.$refs.carousel.handleNavigation(direction)
      },
    },
  }
</script>

All Slots

Compiles and hot-reloads for development

yarn install
yarn serve

then navigate to http://localhost:8080

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

License

This project is licensed under the MIT License - see the LICENSE.md file for details.