Use of vue carousel chart plug-in vue-concise-slider

This article mainly introduces the use of vue carousel chart plug-in vue-concise-slider. Now I will share it with you and give you a reference.

vue-concise-slider

vue-concise-slider, a simple sliding component with simple configuration, supports adaptive/full-screen button paging, and is also compatible with mobile terminals And PC version

v2.4.7 supports vue2.0

Features

1. Simple configuration

2. Lightweight (~24kB gzipped)

3. Multiple sliding styles

Currently implemented

1. Full screen adaptive

2. Mobile compatible

3. Vertical scrolling

4. Timing automatic switching

5. Indefinite width scrolling

6. Seamless loop scrolling

7. Multi-level scrolling

8. Gradient scrolling

9. Rotation scrolling

10. Add customization to the page Component

will be implemented in the future

1. Gradient scrolling

2. Parallax effect

Link

1. Documentation

2. demo

Installation

npm install vue-concise-slider --save

How to use

<template>
<!-- 制作一个框架包裹slider -->
 <p style="width:70%;margin:20px auto;height:400px">
   <!-- 配置slider组件 -->
   <slider :pages="pages" :sliderinit="sliderinit" @slide=&#39;slide&#39; @tap=&#39;onTap&#39; @init=&#39;onInit&#39;>
     <!-- 设置loading,可自定义 -->
     <p slot="loading">loading...</p>
   </slider>
 </p>
</template>
<script>
import slider from &#39;vue-concise-slider&#39;// import slider components
export default {
  el: &#39;#app&#39;,
  data () {
   return {
    //Image list
    pages:[
     {
     html: &#39;<p class="slider1">slider1</p>&#39;,
     style: {
      &#39;background&#39;: &#39;#1bbc9b&#39;
      }
     },
     {
      html: &#39;<p class="slider2">slider2</p>&#39;,
      style: {
       &#39;background&#39;: &#39;#4bbfc3&#39;
      }
     },
     {
      html: &#39;<p class="slider3">slider3</p>&#39;,
      style: {
       &#39;background&#39;: &#39;#7baabe&#39;
      }
     }
    ],
    //Sliding configuration [obj]
    sliderinit: {
     currentPage: 0,
     thresholdDistance: 500,
     thresholdTime: 100,
     autoplay:1000,
     loop:true,
     direction:&#39;vertical&#39;,
     infinite:1,
     slidesToScroll:1,
     timingFunction: &#39;ease&#39;,
     duration: 300
    }
   }
  },
  components: {
    slider
  },
  methods: {
   // Listener event
   slide (data) {
    console.log(data)
   },
   onTap (data) {
    console.log(data)
   },
   onInit (data) {
    console.log(data)
   }
  }
}
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

A brief discussion on the application scenarios of Vue’s built-in component components

A simple tutorial on using less in vue2

vue-cli scaffolding-configuration file under bulid

The above is the detailed content of Use of vue carousel chart plug-in vue-concise-slider. For more information, please follow other related articles on the PHP Chinese website!