vue 原生图片展示限制同时展示数量

最新推荐文章于 2024-03-26 17:18:41 发布

MAIMIHO

最新推荐文章于 2024-03-26 17:18:41 发布

阅读量358

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/MAIMIHO/article/details/130173169

版权

Vue 专栏收录该内容

20 篇文章

订阅专栏

原因是 ElementUI 没有下面这种模式.

效果如下, 细节可以自己完善
在这里插入图片描述

<template>
  <div class="carousel-container">
    <div class="carousel-wrapper">
      <div class="carousel-slide" v-for="(image, index) in displayedImages" :key="index">
        <img :src="image" />
      </div>
    </div>
    <div class="carousel-arrow carousel-arrow-left" v-if="currentIndex > 0" @click="prev">←</div>
    <div class="carousel-arrow carousel-arrow-right" v-if="currentIndex < images.length - 3" @click="next">→</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        "https://via.placeholder.com/300x200/ff0000/ffffff",
        "https://via.placeholder.com/300x200/00ff00/ffffff",
        "https://via.placeholder.com/300x200/0000ff/ffffff",
        "https://via.placeholder.com/300x200/ffff00/000000",
        "https://via.placeholder.com/300x200/ff00ff/ffffff",
      ],
      currentIndex: 0,
    };
  },
  methods: {
    prev() {
      this.currentIndex--;
    },
    next() {
      this.currentIndex++;
    },
  },
  computed: {
    displayedImages() {
      return this.images.slice(this.currentIndex, this.currentIndex + 3);
    },
  },
};
</script>

<style>
.carousel-container {
  position: relative;
  width: 900px;
  height: 200px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease;
}

.carousel-slide {
  width: 300px;
  height: 200px;
  margin-right: 20px;
}

.carousel-slide:last-child {
  margin-right: 0;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.carousel-arrow-left {
  left: 0;
}

.carousel-arrow-right {
  right: 0;
}

.carousel-arrow:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.carousel-arrow i {
  font-size: 20px;
}
</style>