z swiper封装组件-carousel
// 使用
// 组件代码
<template>
import Carousel from '@/components/Carousel/index.vue'
// 注册全局组件 --- 第一个参数组件名 第二个参数组件
Vue.component(Carousel.name, Carousel)
<Carousel :list="bannerlist" />
// 组件代码
<template>
<div class="swiper-container" ref="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(carousel, index) in list" :key="index">
<img :src="carousel.imgUrl" />
div>
div>
<div class="swiper-pagination">div>
<div class="swiper-button-prev">div>
<div class="swiper-button-next">div>
div>
template>
<script>
import Swiper from "swiper";
export default {
name: "Carousel",
props: ["list"],
watch: {
list: {
immediate: true, // 立即监听
handler(newValue, oldValue) {
// $nextTick: 在下次dom更新 循环结束之后 执行回调
this.$nextTick(() => {
var mySwiper = new Swiper(this.$refs.mySwiper, {
loop: true, // 循环模式选项
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
// 如果需要分页器
pagination: {
el: ".swiper-pagination",
clickable: true,
},
// 如果需要前进后退按钮
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
});
},
},
},
};
script>
<style>
style>
免责申明：
1. 本站所有教程、文章或资源分享目的仅供大家学习和交流！
2. 如有无法查看或链接失效，麻烦请报告联系管理员处理！
3. 本站无法保证资源或其时效性，恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途，请去程序官方购买。 所有资料均来自于网络，版权归原创者所有！本站不提供任何保证，并不承担任何法律责任，如果对您的版权或者利益造成损害，请提供相应的资质证明，我们将于3个工作日内予以删除。
