<template>
  <div class="swiper-container">
    <!-- <swiper :options="swiperOptions">
      <swiper-slide v-for="item in slides" :key="item.id">
        <img :src="item.imageSrc" alt="slide">
      </swiper-slide>
    </swiper> -->
    <Swiper  :interval="5000" :slidesPerView=4>
            <Slide v-for="(item,index) in slides" :key=index>
                <img :src="item.imageSrc" />
            </Slide>
        </Swiper>
  </div>
</template>

<script>

import { Swiper, Slide, Autoplay } from 'vue-swiper-component'
// 确保引入 Swiper 的样式
import 'swiper/swiper-bundle.css';

export default {
  components: {
    Swiper,
    Slide,
    Autoplay,
  },
  data() {
    return {
      // 轮播的内容数据
      slides: [
        { id: 1, imageSrc: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
        { id: 2, imageSrc: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
        { id: 3, imageSrc: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
        { id: 4, imageSrc: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
        { id: 5, imageSrc: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
        { id: 6, imageSrc: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
        { id: 7, imageSrc: 'https://qiniu.epipe.cn/5456575529551388672?imageslim&imageView2/1/w/750/h/360' },
        // 更多轮播项...
      ],
      // Swiper 的配置选项
      swiperOptions: {
        slidesPerView: 2,
        // 开启自动播放
        autoplay: {
          delay: 5000, // 自动播放间隔时间，单位为毫秒
          disableOnInteraction: false, // 用户操作后是否停止自动播放，默认为true，设为false则不会停止
        },
        // 其它配置项，如 effect, loop 等，根据需要添加
        loop: true, // 启用无限循环
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 500px;
  overflow: hidden;
  margin: 0 auto;
  border: 1px solid #000;
  background: white;
}
img {
        width: 100%;
    }
.swiper-slide-shadow-right,
.swiper-slide-shadow-left {
  background-image: none !important;
  opacity: 0 !important;
}

.swiper-slide {
  transform: scale(0.7);
  transition: all 0.3s linear;
}
.swiper-slide.swiper-slide-active {
  transform: scale(1);
}

</style>
