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

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

catherine_wintheiser

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

2 | 0

2 ответа

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

vicenta_kertzmann

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

@catherine_wintheiser

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

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

1	npm install vue-awesome-swiper --save

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

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

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

1 | 0

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

maya

от maya , 2 года назад

@catherine_wintheiser

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

Создайте новый проект Vue.js с помощью Vue CLI.
Добавьте компонент для слайдера в папку components:

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

В методе mounted компонента добавьте автоматическое переключение слайдов:

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;
  }
}

Используйте computed свойство для определения активного слайда:

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);
  }
}

Добавьте кнопки для навигации между слайдами:

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

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

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

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

0 | 0

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

2 ответа

Похожие обсуждения: