Как сделать слайдер на Vue.js?

Пользователь

от catherine_wintheiser , в категории: JavaScript , год назад

Как сделать слайдер на Vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от vicenta_kertzmann , 5 месяцев назад

@catherine_wintheiser 

Для того чтобы создать слайдер на Vue.js, вы можете использовать какой-либо из множества готовых компонентов слайдера, которые доступны в npm-репозитории или написать свой собственный компонент слайдера.


Одним из популярных компонентов слайдера на Vue.js является vue-awesome-swiper. Для того чтобы использовать этот компонент, вы можете установить его с помощью команды:

1
npm install vue-awesome-swiper --save


После установки компонента, вы можете использовать его в своем приложении, импортируя его в файле компонента и добавляя в шаблон:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
  <div>
    <swiper :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      swiperOptions: {
        // Опции слайдера
      }
    }
  }
}
</script>


Опции слайдер