vue轮播图插件 Vue-Awesome-Swiper

轮播图插件
Vue-Awesome-Swiper
地址:https://github.com/surmon-china/vue-awesome-swiper
安装:npm install vue-awesome-swiper –save
局部引入:
import ‘swiper/dist/css/swiper.css’
import { swiper, swiperSlide } from ‘vue-awesome-swiper’

    export default {
        components: {
                swiper,
                swiperSlide
        }
    }

全局引入:

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

使用方法:

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    data(){
        return {
            //设置属性
            swiperOption:{
                //显示分页
                pagination: {
                    el: '.swiper-pagination',
                    clickable:true
                },
                //切换模式  横屏或者竖屏
                // direction : 'vertical',
                //设置自动播放速度
                autoplay: {
                    disableOnInteraction: false,
                    delay:4000
                },
                //开启无限循环
                loop:true,
                //设置点击箭头
                paginationClickable :true,
                prevButton:'.swiper-button-prev',
                nextButton:'.swiper-button-next',
                //设置同屏显示的数量,默认为1,使用auto是随意的意思。
                slidesPerView:1,
                //开启鼠标滚轮控制Swiper切换。可设置鼠标选项,或true使用默认值。
                mousewheel:true ,
                //默认为false,普通模式:slide滑动时只滑动一格,并自动贴合wrapper,设置为true则变为free模式,slide会根据惯性滑动可能不止一格且不会贴合。
                // freeMode:true
            }
        }
    },
    components:{
        swiper,
        swiperSlide
    }
}  
</script>

注意:我使用的vue-awesome-swiper版本是2.5.4的,,通过“npm install vue-awesome-swiper@2.5.4 –save”即可安装,千万记住不要直接”npm install vue-awesome-swiper –save”,不然装了一个高版本,你会发现很多问题.

而我的问题就是左右按钮点击不能滑动

版本换了,所以肯定不能用swiper4以上的那一套API去看,所以我们要降级到swiper3版本的,所以vue-awesome-swiper的分页的配置应该如下:
这里写图片描述

改成下面的分页配置就好了,这样左右按钮就可以点击了.

引用\[1\]:根据提供的引用内容,版本3.1.3是vue-awesome-swiper的一个旧版本。引用\[2\]中提到了如何全局引入vue-awesome-swiper,并且需要引入swiper的CSS文件。引用\[3\]中展示了如何在Vue组件中使用vue-awesome-swiper来实现轮播图。根据您的需求,您想要在切换slide时更换app组件的背景。 为了实现这个需求,您可以在vue-awesome-swiper的slide切换事件中,通过修改app组件的背景样式来实现背景的更换。您可以在Vue组件中监听swiper的slideChange事件,并在事件回调函数中修改app组件的背景样式。 下面是一个示例代码,展示了如何实现这个需求: ```javascript <template> <div id="home-swiper"> <swiper ref="homeSwiper" :options="homeSwiperOptions" @slideChange="handleSlideChange"> <swiper-slide>...</swiper-slide> <swiper-slide>...</swiper-slide> </swiper> </div> </template> <script> import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide, }, methods: { handleSlideChange() { // 在这里修改app组件的背景样式 // 例如:this.$root.$el.style.background = "red"; }, }, }; </script> ``` 在handleSlideChange方法中,您可以根据需要修改app组件的背景样式。例如,您可以使用`this.$root.$el.style.background`来修改app组件的背景颜色。请根据您的具体需求进行相应的修改。 希望这个示例能够帮助您实现轮播图并更换app组件的背景。如果您有任何其他问题,请随时提问。 #### 引用[.reference_title] - *1* [【npm install vue-awesome-swiper@3.1.3 -S 】下载成功但是vue-awesome-swiper 用不了](https://blog.csdn.net/Sonnenlicht77/article/details/126951340)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [关于swiper的两种用法(swiper@4.0.7 vue-awesome-swiper@3.1.3)](https://blog.csdn.net/weixin_52259399/article/details/129066576)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [vue-awesome-swiper @3.1.3使用,记录一些bug及解决方法](https://blog.csdn.net/gegegegege12/article/details/121387965)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值