VueJS
July 29, 2020
Простой слайдер-компонент на VueJS
Сделай слайдер простым...
Демо: CodeSandbox
Установка
npm i -S vue-easy-slider
Использование
Установка плагина
import Vue from 'vue' import EasySlider from 'vue-easy-slider' Vue.use(EasySlider)
или использование в инстансе Vue
<slider animation="fade"> <slider-item v-for="(i, index) in list" :key="index" :style="i" @click="hello" > <p style="line-height: 280px; font-size: 5rem; text-align: center;">Страница{{ index + 1 }}</p> </slider-item> </slider>
import { Slider, SliderItem } from 'vue-easy-slider' new Vue({ el: 'body', components: { Slider, SliderItem, }, data() { return { list: [ { backgroundColor: '#3f51b5', width: '100%', height: '100%' }, { backgroundColor: '#eee', width: '100%', height: '100%' }, { backgroundColor: '#f44336', width: '100%', height: '100%' }, ], } }, methods: { hello($event) { console.log(`hello index: ${$event}`) }, }, })
Управление слайдером через v-model
<slider animation="fade" v-model="sliderIndex"> ... </slider> <button @click="moveToIndex(2)">пролистать на страницу 3</button>
... data() { return { // initial index sliderIndex: 1, list: [ { backgroundColor: '#3f51b5', width: '100%', height: '100%' }, { backgroundColor: '#eee', width: '100%', height: '100%' }, { backgroundColor: '#f44336', width: '100%', height: '100%' }, ], } }, methods: { moveToIndex(index) { this.sliderIndex = index }, }, ...
Пропсы
Слайдер
События
Слайдер
Слоты
Элемент слайда
Использование
<slider> <slider-item> <img src=""> <p></p> <button></button> </slider-item> <div slot="loading">custom loading ...</div> </slider>
_____________________________________