轮播图自定义内容

官网：Swiper演示 - Swiper中文网

下载：

npm i swiper

Vue3示例代码：

<template>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div>111</div>
        <div>222</div>
      </div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
    </div>
  </div>
  <button @click="slideToIndex(1)">点击切换</button>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.min.css';

export default {
  data() {
    return {
      swiper: null,
      activeIndex: 0, // 用于存储当前活动的滑动项下标
    };
  },
  mounted() {
    this.swiper = new Swiper(".mySwiper", {
      autoplay: {
        delay: 3000,
        disableOnInteraction: false,
      },
      on: {
        slideChange: () => {
          this.activeIndex = this.swiper.activeIndex; // 更新当前活动项下标
        }
      }
    });
  },
  methods: {
    slideToIndex(index) {
      if (this.swiper) {
        this.swiper.slideTo(index); // 使用 Swiper 的 slideTo 方法切换到指定下标
      }
    },
  },
};
</script>


<style scoped>
html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>