一、在swiper的官网源码下载地址

下载Swiper - Swiper中文网

二、官网浏览轮播图类型地址
Swiper演示 - Swiper中文网

三、swiper配置参数地址
中文api - Swiper中文网

四、在vue3项目引入swiper

npm install swiper

五、在vue3中使用

官网vue3中使用：Swiper Vue.js Components

注意！！！！！！！！！！

在vue3中，需要用到 swiper 的模版功能，必须导入才生效，否则不能使用，比如下面的

分页模块，自动滚动模块

<template>
  <div class="home">
    <div class="home-container">
      <div class="head-swipe">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Swiper from "swiper"
import { Pagination } from "swiper/modules" // 导入分页模块
import { Autoplay } from "swiper/modules" // 导入自动滚动模块
// 导入 Swiper 样式
import "swiper/css"
import "swiper/css/pagination"
import { onMounted } from "vue"

const mySwiperFn = () => {
  // 初始化 Swiper 实例
  new Swiper(".swiper-container", {
    loop: true, // 无缝 ，是否循环展示
    // slidesPerview: "auto",
    // slidesPerGroup: 1, // 一次滚动多少组
    // loopedSlides: 6, //在loop模式下使用slidesPerview:'auto',还需使用该参数设置所要用到的loop个数。
    // 自动播放
    autoplay: {
      delay: 2000, // 每个图片移动完成后间隔
      disableOnInteraction: false, // 触摸后是否停止自动移动
      pauseOnMouseEnter: true //鼠标进入，停止滚动
    },

    resistanceRatio: 0,
    // speed: 3000, // 自动轮播多少时间一张
    // autoplayDisableOnInteraction: false, //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
    // preventLinksPropagation: false, //阻止click冒泡。拖动Swiper时阻止click事件
    // lazyLoading: true,
    // loadPrevNext: true, //允许将延迟加载应用到最接近的slide的图片（前一个和后一个slide）
    // loadPrevNextAmount: 2, //设置在延迟加载图片时提前多少个slide。个数不可少于slidesPerView的数量。默认为1，提前1个slide加载图片，例如切换到第三个slide时加载第四个slide里面的图片。

    // initialSlide: 1, //设定初始化时slide的索引。Swiper默认初始化时显示第一个索引0
    // paginationClickable: true,
    slidesPerView: 2.6, // 一组三个，设置slider容器能够同时显示的slides数量 > 1
    spaceBetween: -46, // 调整项目之间的间距，根据需要调整
    centeredSlides: true,
    // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
      dynamicBullets: true,
      dynamicMainBullets: 1 //动态分页器的主指示点的数量
    },
    // 使用的模块
    modules: [Pagination, Autoplay]
  })
}

onMounted(() => {
  mySwiperFn()
})
</script>

<style scoped lang="scss">
// @use "./index.scss";
.head-swipe {
  width: 100%;
  height: 500px;
  position: relative;
  overflow: hidden;

  .swiper-container {
    width: 100%;
    height: 500px;
    position: relative;

    .swiper-wrapper {
      display: flex;
      width: 100%;
      height: 500px;
      flex-shrink: 0;
      .swiper-slide {
        background: #fff;
        flex-shrink: 0;
        width: 100px;
        height: 500px;
        transition: transform 0.2s linear;
        transform: scale(0.6);
        opacity: 0.6;
        position: relative;

        &.swiper-slide-active,
        &.swiper-slide-duplicate-active {
          transform: scale(1);
          opacity: 1;
        }

        &.swiper-slide-prev {
          transform: scale(0.6);
          opacity: 0.6;
        }

        &.swiper-slide-next {
          transform: scale(0.6);
          opacity: 0.6;
        }
      }
    }
  }
}
</style>

六、展示