vue3 css 实现轮播图

泛酸桂花酒

已于 2024-01-08 17:08:13 修改

阅读量537

点赞数 5

文章标签： css 前端 javascript

于 2024-01-08 16:00:48 首次发布

本文链接：https://blog.csdn.net/xianfei9651/article/details/135459637

版权

这篇文章介绍了如何使用Vue.js构建一个图片轮播组件，通过JavaScript实现图片的自动切换和手动控制，展示了设置定时器和处理循环滑动的基本技巧。

摘要由CSDN通过智能技术生成

<template>
  <div class="carousel">
    <div class="slides" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
      <div v-for="(image, index) in images" :key="index">
        <img :src="image" alt="">
      </div>
    </div>
    <button @click="prevSlide">Previous</button>
    <button @click="nextSlide">Next</button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';

const images = ref([
  'image1.jpg',
  'image2.jpg',
  'image3.jpg',
  // Add more images here
]);
let currentSlide = ref(0);
let timer = null;

const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % images.value.length;
};

const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + images.value.length) % images.value.length;
};

onMounted(() => {
  timer = setInterval(nextSlide, 3000); // Change slides every 3 seconds
});

onUnmounted(() => {
  clearInterval(timer);
});
</script>

<style scoped>
.carousel {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.slides {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 1s;
}

.slides > div {
  flex: 0 0 100%;
  height: 100%;
}

.slides img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>