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/.

TBD

$ yarn add v-siema --dev
# or ...
$ npm i v-siema --save-dev

Register 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);

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>

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.

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.

Please see CHANGELOG for more information what has changed recently.

Please see CONTRIBUTING for details.

• Robbin Johansson
• pawelgrzybek/siema
• spatie/skeleton-vue

The MIT License (MIT). Please see License File for more information.