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-slidex with all npm packages installed. Try it out:

var vueSlidex = require("vue-slidex")

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

vue-slidex v1.0.3

A touch slider for vue.js.

Overview

vue-swipe is a touch slider for vue.js.

forked from ElemeFE/vue-swipe

  • support ssr
  • fix defaultIndex
  • support mouse event
  • ...

Install

$ npm install vue-slidex

Import using module

import { Swipe, SwipeItem } from 'vue-slidex';


### Usage

```HTML
<swipe class="my-swipe" :auto="3000" :defaultIndex="2">
  <swipe-item class="slide1"></swipe-item>
  <swipe-item class="slide2"></swipe-item>
  <swipe-item class="slide3"></swipe-item>
</swipe>
.my-swipe {
        height: 200px;
        color: #fff;
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
    }
    .mint-swipe-items-wrap
        overflow: hidden;
        position: relative;
        height: 200px
    .slide1 {
        background-color: #0089dc;
        color: #fff;
    }

    .slide2 {
        background-color: #ffd705;
        color: #000;
    }

    .slide3 {
        background-color: #ff2d4b;
        color: #fff;
    }
    .mint-swipe-item
        height 200px
        display inline-block
        width 100%
    .mint-swipe
        height 200px
    .slide
        display block
        z-index -1
    .mint-swipe-items-wrap > div
        display block
    .slide.is-active
        height 100%
        width 90%
        z-index 100
        margin-left 5%
        border-radius 10px
    .slide.before-active
        transform translateX(-10%)
        height 80%
        margin-top 5%
        z-index -100
    .slide.after-active
        transform translateX(90%)
        height 80%
        margin-top 5%
        z-index -100

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