【vue实现，轻量级代码】轮播图组件，滑动，触摸，鼠标按键，鼠标滚轮，分为上下和左右滚动，

最新推荐文章于 2023-06-15 22:00:00 发布

快乐的小跳哇

最新推荐文章于 2023-06-15 22:00:00 发布

阅读量876

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/qq_44480414/article/details/116460269

版权

轮播图组件

描述
1、swiper组件内包含的样式太多了，为了轻量化展示效果，所以封装组件

功能
1、适配移动端和pc端
2、可通过鼠标滑动、手机触摸，鼠标按键，鼠标滚轮触发
3、分为上下滚动和左右滚动
4、分为3d模式和普通模式

组件代码
组件代码

部分展示效果
在这里插入图片描述

代码演示

<template>
  <qm-swiper swiperStyle="x" :imgList="imgList" :lunboTime="null"  width="800"></qm-swiper>
</template>

<script>
import QmSwiper from '@/components/qm-swiper/index'
export default {
    components: { QmSwiper },
    data() {
        return {
            imgList: [
                {key:0, url: require('@/assets/images/switper/1.jpg')},
                {key:1, url: require('@/assets/images/switper/2.jpeg')},
                {key:2, url: require('@/assets/images/switper/3.jpeg')},
                {key:3, url: require('@/assets/images/switper/4.jpg')},
                {key:4, url: require('@/assets/images/switper/5.jpeg')},
            ],
        }
    }
}
</script>

<style>

</style>

API

字段	含义	描述
lunboTime	轮播时间	Number，默认为3000
width	容器宽度	String、Number，默认为800
imgList	图片数组	Array
lunboType	轮播方式	String：正常模式：defalut，电影模式：movie