Skip to content
👋 Vue wrapper for Siema carousel
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ Initial commit May 23, 2018
dist Fix webpack-dev-server vulnerability, upgrade dependencies Feb 1, 2019
docs Fix webpack-dev-server vulnerability, upgrade dependencies Feb 1, 2019
src Add object as valid prop on perPage Oct 19, 2018
.babelrc Initial commit May 23, 2018
.editorconfig Initial commit May 23, 2018
.eslintrc Initial commit May 23, 2018
.gitignore Fix webpack-dev-server vulnerability, upgrade dependencies Feb 1, 2019
.npmignore Initial commit May 23, 2018
.travis.yml Initial commit May 23, 2018
CHANGELOG.md
CONTRIBUTING.md Update repo/demo/author links and email Jan 31, 2019
LICENSE.md
README.md Update repo/demo/author links and email Jan 31, 2019
package.json Fix webpack-dev-server vulnerability, upgrade dependencies Feb 1, 2019
webpack.base.js
webpack.config.js Initial commit May 23, 2018
yarn.lock Fix webpack-dev-server vulnerability, upgrade dependencies Feb 1, 2019

README.md

Latest Version on NPM Total Downloads on NPM Software License Build Status

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

TBD

Installation

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

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 change

API

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.

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Credits

License

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

You can’t perform that action at this time.