Vue3中复制粘贴Swiper秒做轮播图

代码我先粘到这，过一会录一个视频和大家分享。

简单介绍：

    1.安装swiper

npm install swiper

    2.建一个SwiperCarousel.vue组件，代码如下：

<template>
  <div class="slides">
    <!-- loop循环模式，effect淡入淡出，注意先loop后effect，不然可能不出现淡入淡出效果-->
    <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="50"
      :pagination="{ clickable: true }"
      navigation
      :autoplay="{ delay: 2000 }"
      :scrollbar="{ draggable: true }"
      loop
      effect="fade"
      :effectFade="{ crossFade: true }"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>
        <!-- 在 Vue 3 中，如果你需要在模板中引用图片,可以使用 require 函数 -->
        <img :src="require('@/assets/images/slide1.jpg')" alt="LunBo"
      /></swiper-slide>
      <swiper-slide>
        <img :src="require('@/assets/images/slide2.jpg')" alt="LunBo"
      /></swiper-slide>
      <swiper-slide>
        <img :src="require('@/assets/images/slide3.jpg')" alt="LunBo"
      /></swiper-slide>
      <swiper-slide>
        <img :src="require('@/assets/images/slide4.jpg')" alt="LunBo"
      /></swiper-slide>
      <swiper-slide>
        <img :src="require('@/assets/images/slide1.jpg')" alt="LunBo"
      /></swiper-slide>
      <swiper-slide>
        <img :src="require('@/assets/images/slide2.jpg')" alt="LunBo"
      /></swiper-slide>
    </swiper>
  </div>
</template>
<script>
// import Swiper core and required modules
import {
  Navigation,
  Pagination,
  Scrollbar,
  A11y,
  Autoplay,
  EffectFade,
} from "swiper/modules";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
// import "swiper/css/scrollbar"; //滚动条
import "swiper/css/autoplay"; //自动播放
import "swiper/css/effect-fade"; //淡入淡出

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };

    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y, Autoplay, EffectFade],
    };
  },
};
</script>

<style >
.slides {
  width: 590px;
  height: 470px;
  margin: 0 auto;
}
/* 箭头 */
.slides .swiper-button-prev,
.slides .swiper-button-next {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.slides .swiper-button-prev:hover,
.slides .swiper-button-next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.slides .swiper-button-prev {
  left: 10px;
}

.slides .swiper-button-next {
  right: 10px;
}
.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 24px; /* 修改箭头图标的大小 */
  color: #ffffffcc;
}

/* 小圆点 */
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  margin: 0 5px;
  border-radius: 50%;
}

.swiper-pagination-bullet-active {
  background-color: rgba(255, 255, 255, 0.8);
}
</style>

    3.在父组件中引入SwiperCarousel.vue组件：（tip：其他组件都可以做他的父组件）

        为了展示更加直观，我再App.vue中演示，code如下：

<template>
  <!-- 轮播图 -->
  <SwiperCarousel />
  <!-- 轮播图结束 -->
</template>

<script>
import SwiperCarousel from "./SwiperCarousel.vue";
export default {
  name: "App",
  components: { SwiperCarousel },
};
</script>

运行代码即可。

补充：如果想先看效果，不想插入图片，可以将<template>中的

<img :src="require('@/assets/images/slide1.jpg')" alt="LunBo" /> 

换成文字：slide1,slide2,slide3。。。。。

原文地址：https://blog.csdn.net/m0_63615119/article/details/140584117

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！