vue3使用轮播图组件swiper
一、在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>
