• Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
  • Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    Сам записывает клиентов и напоминает им о визите;
    Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом

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

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

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

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

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

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

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;">Page{{ 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)">move to page 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
    },
  },
...

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

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.

3729 просмотров