<fieldset id="sqcag"><input id="sqcag"></input></fieldset><del id="sqcag"></del><del id="sqcag"></del>

<fieldset id="sqcag"></fieldset>

vue3.x使用swiper實現(xiàn)卡片自動輪播效果

3403771864 發(fā)布于2022-09-08 21:56 / 1951人閱讀

　　在許多開發(fā)項目中輪播效果承擔(dān)著熱門主題、熱門推薦，以下是在vue3.x中使用swiper實現(xiàn)自動輪播。

　　安裝Swiper

　　npm i swiper@5.4.5

　　引入組件庫

　　import Swiper from 'swiper' // 引入庫
　　import 'swiper/css/swiper.css' // 引入樣式文件，注意5和6版本的樣式文件不一致
　　完整代碼
　　<template>
　　<div>
　　<div>
　　<div v-for="(item, i) in imgs" :key="i"><img :src="item.pic" /></div>
　　</div>
　　</div>
　　</template>
　　<script>
　　import { reactive, onMounted } from 'vue'
　　import Swiper from 'swiper' // 引入庫
　　import 'swiper/css/swiper.css' // 引入樣式文件，注意5和6版本的樣式文件不一致
　　import icon_right_0 from '@/assets/homedetail/banner.jpg' //引入的圖片
　　import icon_right_1 from '@/assets/homedetail/banner.jpg1'//引入的圖片
　　export default {
　　name: 'HomeSwiper',
　　setup() {
　　onMounted(() => {
　　var mySwiper = new Swiper('.swiper-container', {
　　loop: true, // 循環(huán)模式選項
　　autoplay: true, //自動滾動
　　effect: 'fade',//漸變切換
　　autoplay: {
　　delay: 2000, //1秒切換一次
　　pauseOnMouseEnter: true //鼠標移入 輪播暫停
　　},
　　})
　　})
　　let imgs = reactive([
　　{ pic: icon_right_0 },
　　{ pic: icon_right_1 },
　　{ pic: icon_right_0 }
　　])
　　return {
　　imgs
　　}
　　}
　　}
　　</script>
　　<style>
　　.swiper-container {
　　width: 100%;
　　height: 200px;
　　.swiper-slide {
　　width: 100% !important;
　　img {
　　width: 100%;
　　height: 100%;
　　object-fit: cover;
　　}
　　}
　　}
　　</style>

　　以下為展示效果