npm.io
1.1.0 • Published 5 years ago

vue-simple-carousel

Licence
MIT
Version
1.1.0
Deps
1
Size
796 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

vue-simple-carousel

Simple carousel slider for Vue.js 3

Installation

npm install vue-simple-carousel

or

yarn add vue-simple-carousel

Usage


<template>
  <simple-carousel :items="photos">
    <template #default="{ item, index }">
      <img :src="item" :alt="index">
    </template>
  </simple-carousel>
</template>

<script>
import SimpleCarousel from 'vue-simple-carousel';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    SimpleCarousel,
  },
  setup() {
    return {
      photos: [
        'https://via.placeholder.com/150/0000FF/808080?Text=Test%20Image%201',
        'https://via.placeholder.com/150/FF0000/FFFFFF?Text=Test%20Image%202',
        'https://via.placeholder.com/150/FFFF00/000000?Text=Test%20Image%203',
        'https://via.placeholder.com/150/000000/FFFFFF/?text=Test%20Image%204',
      ]
    }
  }
});
</script>
SimpleCarouselContainer props
Attribute Type Default Description
items Array List of slides (required)
modelValue Number 0 Current slide index
perPage Number / [Number, Number][] *
1* Number of slides per page. :per-page="3" or :per-page=[[640, 2], [720, 3]] for several endpoints
slideByItem Boolean false Slide by one item if true, or by full page if false
loop Boolean false Flag to make the carousel loop around when it reaches the end.
adjustable Boolean false Adjust the height of the wrapper to the height of the visible slides
sideNav Boolean false Show side navigation buttons
pages Boolean false Show pages navigation
dots Boolean false Show dots navigation
SimpleCarouselContainer events
Event name Description Parameter
update:modelValue Emitted when current index changed Current index Number
change-per-page Emitted when current per page number changed Current per page number Number

Keywords

vuevue 3carouselslidersimplecomponent