資訊專欄INFORMATION COLUMN
在許多開發(fā)項(xiàng)目中輪播效果承擔(dān)著熱門主題、熱門推薦，以下是在vue3.x中使用swiper實(shí)現(xiàn)自動(dòng)輪播。
安裝Swiper
npm i [email protected]
引入組件庫
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)模式選項(xiàng)
autoplay: true, //自動(dòng)滾動(dòng)
effect: 'fade',//漸變切換
autoplay: {
delay: 2000, //1秒切換一次
pauseOnMouseEnter: true //鼠標(biāo)移入 輪播暫停
},
})
})
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>以下為展示效果
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/127604.html
摘要：其次父組件中負(fù)責(zé)通用的功能，以及輪播的整體架構(gòu)，其結(jié)構(gòu)如下。下面的是一種移動(dòng)端的適配方案。接下來實(shí)現(xiàn)函數(shù)運(yùn)用動(dòng)畫切換到指定下標(biāo)的子項(xiàng)到此為止，咱們就已經(jīng)完成了一個(gè)初步的滑動(dòng)切換輪播圖的功能了。 前言 昨天寫了一篇側(cè)邊菜單組件的文章，閱讀人數(shù)挺多的，內(nèi)心很欣喜（偷著樂，第一篇文章有這么多人看）！乘著這股勁，今天在繼續(xù)寫一篇我們平時(shí)工作中更常用的滑動(dòng)輪播組件的文章。 效果展示 老規(guī)矩，咱們...
vue-swiper 基于 Vue2.0 開發(fā)，基本滿足大部分功能 輕量、高性能輪播插件。目前支持 無縫銜接自動(dòng)輪播、無限輪播、手勢(shì)輪播 沒有引入第三方庫，原生 js 封裝,打包之后只有 8.2KB 大小 性能還是杠杠滴 demo showImg(https://segmentfault.com/img/remote/1460000012630045?w=280&h=280); ? 覺得好用給...
摘要：根據(jù)公司需求需要對(duì)讓輪播無間隙播放，類似這種效果。通過查看代碼，發(fā)現(xiàn)這個(gè)類中有個(gè)屬性修改中的源碼，將這個(gè)屬性的值改為即可實(shí)現(xiàn)無縫隙輪播，就是這么簡(jiǎn)單。輪播有它的好處是純打造的滑動(dòng)特效插件，面向手機(jī)平板電腦等移動(dòng)終端。 根據(jù)公司需求需要對(duì)讓輪播無間隙播放，類似這種效果：http://www.16sucai.com/upload...。因?yàn)橥祽杏玫氖莝wiper.js插件編寫的。swipe...
閱讀 566·2023-03-27 18:33
閱讀 755·2023-03-26 17:27
閱讀 655·2023-03-26 17:14
閱讀 608·2023-03-17 21:13
閱讀 541·2023-03-17 08:28
閱讀 1829·2023-02-27 22:32
閱讀 1324·2023-02-27 22:27
閱讀 2207·2023-01-20 08:28
