vue-easy-slider — простой слайдер компонент для VueJS

Незамысловатый слайдер с fade-анимацией. Простой и удобный в настройке и использовании. Реагирует на изменение ширины экрана и многое другое.

Описание компонента

Если вам необходимо быстрое решение в создании слайдера и интеграции его в проект на Vue, то данный компонент — один из лучших вариантов сделать это.

Установка и использование

Инсталляция:

Импорт компонента:

Или работа через экземпляр Vue:

Управление слайдером через v-model:

Таблица с входными параметрами:

name type default description
width String auto Slider width
height String 300px Slider height
touch Boolean true Enable touch slide
animation ‘normal’, ‘fade’ ‘normal’ Change animation
autoplay Boolean true Autoplay
interval Number 3000 Delay of autoplay ( autoplay option should be true )
speed Number 500 Speed(ms) of animation
indicators ‘center’, ‘left’, ‘right’, false ‘center’ Show indicators on option position or hide indicators
control-btn Boolean true Show control button
before-next Function () => true Before next guard, sliding to next item when this function return true
before-previous Function () => true Before previous guard

События:

name description $event
change Fires when the slide change number // index of slides
next Fires when the button for the next slide was pressed { original: number, next: number }
previous Fires when the button for the previous slide was pressed { original: number, next: number }

Более детальную информацию о работе компонента слайдера VueJS можно найти на страничке Github.

190 просмотров