Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including vue-swiper-carousel with all npm packages installed. Try it out:

var vueSwiperCarousel = require("vue-swiper-carousel")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

vue-swiper-carousel v0.0.4

Vue carousel based on swiperjs

popsicle-swiper

##Demo

See vue-swiper

Project setup

First setup your vue-cli application. Then you enter the following commands in terminal

yarn install

OR

npm install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

How to use

To begin using the plugin, you must first add it to vue instance

Globally

import Vue from 'vue'
import Swiper from '@popsicle/vue-swiper'

Vue.use(Swiper)

On a component

<script>
import {Swiper, SwiperSlide} from '@popsicle/vue-swiper'

export default({
    component: {
        'swiper': 'Swiper',
        'swiper-slide': 'SwiperSlide'
    }, 
    ...
})
</script>

Then you can include it in your vue template as follows:

<swiper></swiper>

Output:

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper" style="height: auto">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
   
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

Props:

PropsDescriptionTypeDefaultRequired
loopSet to true to enable continuous loop modeBooleantruefalse
slidesPerViewNumber of slides per view (slides visible at the same time on slider's container).auto or Number1false
spaceBetweenDistance between slides in px.Number0false
watchOverflowWhen enabled Swiper will be disabled and hide navigation buttons on case there are not enough slides for slidingBooleantruefalse
freeModeslidesPerView: 'auto' is currently not compatible with multirow mode, when slidesPerColumn > 1Booleanfalsefalse
centeredSlidesIf true, then active slide will be centered, not always on the left side.Booleantruefalse
autoplayObject with autoplay parameters or boolean true to enable with default settings. For example: {delay: 5000, ...}Boolean or Objecttruefalse
autoHeightSet to true and slider wrapper will adopt its height to the height of the currently active slideBooleanfalsefalse
navigationShow or hide navigationBooleantruefalse
breakpointsAllows to set different parameter for different responsive breakpoints (screen sizes). Not all parameters can be changed in breakpoints, only those which are not required different layout and logic, like slidesPerView, slidesPerGroup, spaceBetween, slidesPerColumn.Object{...}false
speedDuration of transition between slides (in ms)Number300false
initialSlideIndex number of initial slide.Number0false
directionCould be 'horizontal' or 'vertical' (for vertical slider).Stringhorizontalfalse

If you use "margin" css property to the elements which go into Swiper in which you pass "spaceBetween" into, navigation might not work property.

If you use it with "auto" value and along with loop: true then you need to specify loopedSlides parameter with amount of slides to loop (duplicate)

slidesPerView: 'auto' is currently not compatible with multirow mode, when slidesPerColumn > 1

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free