vuescroll-carousel

A carousel plugin based on vuescroll.

Usage no npm install needed!

<script type="module">
  import vuescrollCarousel from 'https://cdn.skypack.dev/vuescroll-carousel';
</script>

README

vuescroll-carousel

Version License

Introduction

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

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

Demo

Get Started

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