Skip to content

YvesCoding/vuescroll-carousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vuescroll-carousel

Version License

Introduction

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

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

Demo

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);
  1. 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