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

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

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

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от vicenta_kertzmann , год назад

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


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

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

от maya , 10 месяцев назад

@catherine_wintheiser 

Для создания слайдера на Vue.js можно использовать компоненты Vue.js и CSS для стилизации. Ниже приведен пример шагов для создания простого слайдера:

  1. Создайте новый проект Vue.js с помощью Vue CLI.
  2. Добавьте компонент для слайдера в папку components:
 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
28
29
30
31
32
33
34
35
36
37
38
<template>
  <div class="slider-container">
    <div class="slider">
      <div v-for="(slide, index) in slides" :key="index" v-bind:style="{ transform: 'translateX(' + (index * -100) + '%)' }">
        <img :src="slide.image" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Slider',
  data() {
    return {
      slides: [
        { image: '/image1.jpg' },
        { image: '/image2.jpg' },
        { image: '/image3.jpg' }
      ]
    }
  }
}
</script>

<style scoped>
  .slider-container {
    width: 100%;
    overflow: hidden;
  }
  .slider {
    display: flex;
    width: 300%;
  }
  .slider img {
    width: 100%;
  }
</style>


  1. В методе mounted компонента добавьте автоматическое переключение слайдов:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
mounted() {
  setInterval(() => {
    this.nextSlide();
  }, 5000);
},
methods: {
  nextSlide() {
    const lastSlideIndex = this.slides.length - 1;
    const currentSlideIndex = this.slides.findIndex(slide => slide.isActive);
    const nextSlideIndex = currentSlideIndex === lastSlideIndex ? 0 : currentSlideIndex + 1;

    this.slides[currentSlideIndex].isActive = false;
    this.slides[nextSlideIndex].isActive = true;
  }
}


  1. Используйте computed свойство для определения активного слайда:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
data() {
  return {
    slides: [
      { image: '/image1.jpg', isActive: true },
      { image: '/image2.jpg', isActive: false },
      { image: '/image3.jpg', isActive: false }
    ]
  }
},
computed: {
  activeSlide() {
    return this.slides.find(slide => slide.isActive);
  }
}


  1. Добавьте кнопки для навигации между слайдами:
 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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<template>
  <div>
    <div class="slider-container">
      <div class="slider">
        <div v-for="(slide, index) in slides" :key="index" v-bind:style="{ transform: 'translateX(' + (index * -100) + '%)' }">
          <img :src="slide.image" />
        </div>
      </div>
    </div>
    <div class="controls">
      <button @click="prevSlide">Prev</button>
      <button @click="nextSlide">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Slider',
  data() {
    return {
      slides: [
        { image: '/image1.jpg', isActive: true },
        { image: '/image2.jpg', isActive: false },
        { image: '/image3.jpg', isActive: false }
      ]
    }
  },
  computed: {
    activeSlide() {
      return this.slides.find(slide => slide.isActive);
    }
  },
  mounted() {
    setInterval(() => {
      this.nextSlide();
    }, 5000);
  },
  methods: {
    nextSlide() {
      const lastSlideIndex = this.slides.length - 1;
      const currentSlideIndex = this.slides.findIndex(slide => slide.isActive);
      const nextSlideIndex = currentSlideIndex === lastSlideIndex ? 0 : currentSlideIndex + 1;

      this.slides[currentSlideIndex].isActive = false;
      this.slides[nextSlideIndex].isActive = true;
    },
    prevSlide() {
      const lastSlideIndex = this.slides.length - 1;
      const currentSlideIndex = this.slides.findIndex(slide => slide.isActive);
      const prevSlideIndex = currentSlideIndex === 0 ? lastSlideIndex : currentSlideIndex - 1;

      this.slides[currentSlideIndex].isActive = false;
      this.slides[prevSlideIndex].isActive = true;
    }
  }
}
</script>

<style scoped>
  .slider-container {
    width: 100%;
    overflow: hidden;
  }
  .slider {
    display: flex;
    width: 300%;
  }
  .slider img {
    width: 100%;
  }
  .controls {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  .controls button {
    margin: 0 10px;
  }
</style>


  1. Стилизуйте компонент используя CSS, чтобы изменять внешний вид слайдера.


Готовый слайдер Vue.js можно увидеть здесь: https://codesandbox.io/s/vuejs-slider-z7b5o?file=/src/components/Slider.vue:0-1243


При желании, можно использовать библиотеки Vue.js и CSS, например, Vue Carousel и Bootstrap, чтобы создать более сложный, настраиваемый слайдер.