V-Siema
Vue wrapper for Siema carousel.Siema is a lightweight (only 3kb gzipped) carousel plugin with no dependencies and no styling. It is 100% open source and available on Github.
Full docs with examples: https://pawelgrzybek.com/siema/.
Demo
TBDInstallation
$ yarn add v-siema --dev
# or ...
$ npm i v-siema --save-devRegister the component:
import Vue from 'vue';
import { Siema } from 'v-siema';
Vue.component('siema', Siema);Alternatively using
Vue.use() to register the component:import Siema from 'v-siema';
Vue.use(Siema);Usage
Display the component using any custom markup that fits your use case:<template>
<div>
<siema
ref="siema"
@init="init"
@change="change"
:loop="true"
>
<!-- The Slides -->
<div v-for="n in 5">
<img src="http://via.placeholder.com/1920x1080" :alt="'Slide ' + n">
</div>
</siema>
<!-- Example using prev/next buttons -->
<div>
<a @click="prev">Prev</a>
<a @click="next">Next</a>
</div>
</div>
</template>
<script>
import { Siema } from 'v-siema';
Vue.component('siema', Siema);
export default {
methods: {
init() {
console.log('Initialized!');
},
change() {
console.log('Changed!');
},
prev() {
this.$refs.siema.prev();
},
next() {
this.$refs.siema.next();
},
},
};
</script>Available properties
Prop | Data Type | Default | Required | Description ------------------- | ---------- | --------- | ------- | -----------autoplay | Boolean | false | false | Enable autoplay
autoplay-duration | Number | 3000 | false | Autoplay duration between slide change
selector | String | siema | false | The selector to use as a carousel
duration | Number | 500 | false | Slide transition duration in milliseconds
easing | String | ease | false | CSS transition-timing-function — describes acceleration curve
per-page | Number, Object | 1 | false | The number of slides to be shown per page
start-index | Number | 0 | false | Index (zero-based) of the starting slide
draggable | Boolean | true | false | Use dragging and touch swiping
multiple-drag | Boolean | true | false | Allow dragging to move multiple slides
threshold | Number | 20 | false | Touch and mouse dragging threshold (in px)
loop | Boolean | false | false | Enable loop
rtl | Boolean | false | false | Enables layout for languages written from right to left
@init | Function | | false | Runs immediately after initialization
@change | Function | | false | Runs after slide changeAPI
All of Siema's methods are available:this.$refs.siema.prev(howManySlides = 1, callback);Go to previous item. Optionally pass
howManySlides (number) and callback (function).this.$refs.siema.next(howManySlides = 1, callback);Go to next item. Optionally pass
howManySlides (number) and callback (function).this.$refs.siema.goTo(index, callback);Go to item at particular
index (number). Optionally pass callback (function).this.$refs.siema.remove(index, callback);Remove item at particular
index (number). Optionally pass callback (function).this.$refs.siema.insert(item, index, callback);Insert new
item (DOM element) at specific index (number). Optionally pass callback (function).this.$refs.siema.prepend(item, callback);Prepend new
item (DOM element). Optionally pass callback (function).this.$refs.siema.append(item, callback);Append new
item (DOM element). Optionally pass callback (function).this.$refs.siema.destroy(restoreMarkup = false, callback);Remove all event listeners on the instance. Use
restoreMarkup to restore the initial markup inside selector. Optionally pass callback (function).this.$refs.siema.currentSlide;Prints current slide index.
Extras
this.$refs.siema.init();Initiate the slider instance. Useful when you'd want to initiate the slider manually. Please note that the slider component is automatically initiated when mounted.
