vue-awesome-swiper插件的使用

1、安装

npm install vue-awesome-swiper --save-dev

2、在vue中引入

进入maim.js文件

import vueSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
    
Vue.use(vueSwiper)

3、页面调用

<template>
    <swiper :options="swiperOption">
            <swiper-slide class="swiper-slide" v-for="(item,index) in carouselArr" :key="index">
                <img :src="item"/>
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination"  slot="pagination"></div>   
             <!-- 左右箭头 --> 
            <div class="swiper-button-prev" slot="button-prev"></div> 
            <div class="swiper-button-next" slot="button-next"></div> 
        </swiper>
</template>

<script>
    export default {
        data(){
            return {
                swiperOption:{
                    //显示分页
                    pagination: {
                      el: '.swiper-pagination'
                    },
                    //设置点击箭头
                    navigation: {
                      nextEl: '.swiper-button-next', 
                      prevEl: '.swiper-button-prev'
                    },
                    //自动轮播
                    autoplay: {
                      delay: 2000,
                      //当用户滑动图片后继续自动轮播
                      disableOnInteraction: false,
                    },
                    //开启循环模式
                    loop: true
                }
            }
        }
    }
</script>

wordpress建站如何设置伪静态页面

vue页面如何利用插件实现列表滚动循环

vuejs怎么结合pinia插件

wordpress分类菜单顺序混乱解决方法

vuejs利用awe-dnd插件实现拖拽功能

标签： 插件

上面是“vue-awesome-swiper插件的使用”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_100.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！