vue-carousel-selector
a carousel selector for vuejs
Preview
Install
npm install --save-dev vue-carousel-selector
Usage
- in your template:
<carousel class="temp-selector-container" :options="carouseloptions" ref="carouselselector" :show="show"> <slide v-for="(slide,i) in temperatures" :key="slide" class="temp-item" :index="i"> {{slide}} </slide> </carousel>
- in your script:
import { carousel, slide } from 'vue-carousel-selector' ... components: { carousel, slide }, data:{ temperatures: [61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86], carouseloptions:{ vertical:true, num:26, //essential initTZ:{ //essential,defines the height and width of the carousel panel width:300, height:200 } } }
- options:
options:{ vertical:true,//decide whether it is vertical,default is false num:25,//declares the length of your data array(That is the number of carousel panels) rtl:false,//decide whether or not to start from the left,default is false dtu:false,//if the direction is vertical, it decide whether or not to start from the up,default is false touchable:true, //decide whether it can scroll,default is true initTZ:{ // defines the height and width of the carousel panel width:300, height:200 } }