README_EN.md

English | 中文

vue-concise-slider

---

vue-concise-slider,A simple sliding component,has easy configuration,supported self-adaption / fullscreen / button / page,and is compatible with mobile and PC terminal

version

v3.3.0 Supported vue2.0+

Features

• Simple configuration
• Simple and lightweight (~30kB gzipped)
• Multiple sliding effects

Achieved

• Self-adaption Fullscreen
• Compatible with mobile and PC terminal
• Vertical Slides
• Autoplay Slides
• Auto Slides Per View / Carousel Mode
• Loop Mode / loopedSlides Loop
• Loop Mode / multiple slide
• Fade Effect
• CoverFlow Effect
• Add custom components in page
• Use slideritem instead of page
• Custom paging
• Center slide
• New coverflow
• Nested slider

To Do List

• Virtual slider

Links

• Documentation
• demo

Installation

  npm install vue-concise-slider --save

How to use it

<template>
<!-- Make a frame wrapped slider -->
 <div style="width:70%;margin:20px auto;height:400px">
      <!-- Configuring slider components -->
      <slider ref="slider" :options="options" @slide='slide' @tap='onTap' @init='onInit'>
          <!-- slideritem slot -->
          <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
          <!-- Set loading -->
          <div slot="loading">loading...</div>
      </slider>
 </div>
</template>
<script>
import { slider, slideritem } from 'vue-concise-slider'// import slider components
export default {
   el: '#app',
   data () {
      return {
        //Image list
        someList:[],
        //Sliding configuration [obj]
        options: {
          currentPage: 0,
          thresholdDistance: 500,
          thresholdTime: 100,
          autoplay:1000,
          loop:true,
          direction:'vertical',
          loopedSlides:1,
          slidesToScroll:1,
          timingFunction: 'ease',
          speed: 300
        }
      }
    },
    components: {
        slider,
        slideritem
    },
    mounted () {
      let that = this
      setTimeout(function () {
        that.someList = [
          {
            html: 'slide1',
            style: {
              'background': '#1bbc9b'
            }
          },
          {
            html: 'slide2',
            style: {
              'background': '#4bbfc3'
            }
          },
          {
            html: 'slide3',
            style: {
              'background': '#7baabe'
            }
          }
        ]
      }, 2000)
    },
    methods: {
      // Listener event
      slide (data) {
        console.log(data)
      },
      onTap (data) {
        console.log(data)
      },
      onInit (data) {
        console.log(data)
      }
    }
}
</script>

Browser Support

Modern browsers and Internet Explorer 10+.

Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request

Have a better idea？

Welcome to leave your opinion:warpcgd#1

BUG？oh no!

You can be submitted here, and i will be dealt with as soon as possible:warpcgd#2