Vue3 使用轮播图

前言

这里使用swiper
官网地址：https://swiperjs.com/vue
中文网地址：https://www.swiper.com.cn（提供了参数搜索）
下面简单说说几种简单的使用
基本可以满足项目需求
如果需要复杂的效果，请去查看官方文档

安装组件

npm install swiper

基础用法

从包里引入 Swiper,SwiperSlide 组件
引入swiper的css样式
图片放 SwiperSlide 组件中
给Swiper父级一个固定高度宽度即可
基础的只能手动拖动进行轮播

自动播放

自动播放需要引入 Autoplay 组件
可以设置 Swiper上的 autoplay 属性
该组件放入 Swiper 的 modules属性中

分页

就是轮播图上的小点点
需要引入 Pagination 组件
引入对应组件样式
该组件放入 Swiper 的 modules属性中
通过设置 Swiper 的 pagination 属性设置分页

无限循环

假设就三张图片
没有循环：1，2，3结束不动了
有循环：1，2，3，1，2，3 …
循环只需要设置 Swiper 的 loop属性为 true 即可

前进后退按钮

引入 Navigation 组件
引入对应组件样式
也放在 Swiper的 modules属性中
通过 Swiper的 navigation 属性设置前进后退

切换效果

引入具体切换效果组件
以立方体效果为例，则引入 EffectCube 组件
引入对应组件样式
同时 Swiper 上的 effect 属性设置 成 cube
可以通过设置 cubeEffect 属性来指定具体效果参数

示例

<template>
    <common-header></common-header>
    <router-view></router-view>
    <div class="category_container">
        <div class="category_left"></div>
        # 给一个具体宽度，高度
        <div class="category_right">
            <swiper
                    # 设置显示分页，分页可点击
                    :pagination="{ clickable: true}"
                    # 显示前进后退按钮
                    :navigation="true"
                    # 无限循环
                    :loop="true"
                    # 指定使用的模块
                    :modules="modules"
                    # 指定效果为立方体
                    :effect="'cube'"
                    # 配置立方体效果具体参数
                    # slideShadows:true 轮播图增加阴影
                    # shadow:true 开启投影
                    # shadowOffset: 10 投影距离10px
                    # shadowScale:0.94 投影比例
                    :cubeEffect="{
                    slideShadows:true,
                    shadow: true,
                    shadowOffset: 10,
                    shadowScale: 0.94,
                    }"
                    # 设置自动播放
                    # delay: 2000 播放间隔 2s
                    # disableOnInteraction:false 其它事件不会终止自动播放
                    # disableOnInteraction 设置成true后，其它事件如上一页，下一页
                    # 点击完后，就再也不会自动播放了
                    :autoplay="{
                     delay: 2000,
                     disableOnInteraction: false,
                    }"
                    >
                <swiper-slide>
                    <a>
                        <img src="../assets/image/a.jpg" class="swiper_image">
                    </a>
                </swiper-slide>

                <swiper-slide>
                    <a>
                        <img src="../assets/image/b.jpg" class="swiper_image">
                    </a>
                </swiper-slide>

                <swiper-slide>
                    <a>
                        <img src="../assets/image/c.webp" class="swiper_image">
                    </a>
                </swiper-slide>

            </swiper>
        </div>
    </div>
</template>

<script>
    import CommonHeader from "../components/CommonHeader";
    # 引入基础轮播组件
    import {Swiper, SwiperSlide} from 'swiper/vue';
    # 引入分页，前进后退，立方体效果，自动循环 模块
    import {Pagination, Navigation, EffectCube, Autoplay} from "swiper";
    # 基础样式
    import 'swiper/css';
    # 立方体样式
    import "swiper/css/effect-cube";
    # 前进后退样式
    import "swiper/css/navigation";
    # 分页样式
    import "swiper/css/pagination";


    export default {
        name: "HomePage",
        components: {CommonHeader, Swiper, SwiperSlide},
        data() {
            return {
                # 设置 swiper 使用 分页，前进后退，立方体效果，自动循环 模块
                modules: [Pagination, Navigation, EffectCube, Autoplay],
            }
        },
        mounted() {
 
        }
    }
</script>