vuescroll-carousel

Introduction

vuescroll-carousel is a carousel plugin based on ^[email protected].

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

Demo

• Live Demo

• See the Demo fold of this repo.

Get Started

1. You should install [email protected] , [email protected]+ 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);

2. 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.

Author

WangYi7099(Yves Wang)

License

MIT