一、在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數量 > 1spaceBetween: -46, // 調整項目之間的間距，根據需要調整centeredSlides: true,// 窗口變化,重新init,針對F11全屏和放大縮小,必須加observer: true, //修改swiper自己或子元素時，自動初始化swiperobserveParents: true, //修改swiper的父元素時，自動初始化swiperpagination: {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>

六、展示