Vuescroll-carousel NPM

vuescroll-carousel

Introduction

vuescroll-carousel is a carousel plugin based on ^vuescroll@4.9.0.

It seems like swiper. You can see the guide below.

Demo

Live Demo
See the Demo fold of this repo.

Get Started

You should install Vue@2.x , vuescroll@4.9.0+ and vuescroll-carousel , and registry the plugins.

 npm i vue vuescroll vuescroll-carousel -S

import Vue from vue;
import vuescroll from vuescroll;
import vuescroll/dist/vuescroll.css;
// import carousel plugin and its css file
import vuescrollCarousel from vuescroll-carousel;
import vuescroll-carousel/dist/index.css;

// reigstry the plugin

Vue.use(vuescroll);
Vue.use(vuescrollCarousel);

Wrap the element and that's all.

<vuescroll-carousel>
  <div v-for="i in 10" :key="i">{{i}}</div>
</vuescroll-carousel>

Props and Api

Props

PropName	Default	Description
type	h	`h` or `v`. `h` means scrolling on horizontal direction and `v` is on vertical direction.
loop	true	Whether carousel is connected between the end and the end or not.
autoPlay	true	whether play the carousel automatically or not.
intervalTime	1000	Interval time of auto-play, only enable when autoPlay is enable.
playSpeed	300	play speed.
indicator	true	show indicator or not
currentIndex	1	the index of current active item, strat from 1.

Api

Api Name	Description	Arguments
refresh	refresh the compoennt's status. All states will be recalculated.	-
goToPage	Go to the specified page.	(pageIndex: Number, animate: Boolean)
prev	go to pre page.
next	go to next page.