🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A fashion carousel-style item selector for Vue.js applications.

Other

Documentation

vue-carousel-selector

a carousel selector for vuejs

Preview

img

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     } } 

You May Also Like