Vue3+Vite中引用Swiper11自动轮播、左右切换不生效，已解决

华玖

于 2024-09-26 14:45:50 发布

阅读量187

点赞数 3

分类专栏： Vue 文章标签： vue3 Swiper Vite

本文链接：https://blog.csdn.net/qq_30675311/article/details/142555203

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.安装swiper

npm install swiper

2.导入依赖

import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

3.导入、注册模块（最关键一步）

// 导入Swiper模块
import {Autoplay, Navigation} from "swiper/modules";
// 注册Swiper模块
Swiper.use([Autoplay, Navigation]);

4.实例化Swiper对象

var swiper = new Swiper('#' + props.swiperId, {
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

5.创建组件
组件文件名称top-swiper

<template>
    <div class="swiper" :id="swiperId"
         :style="{ height: isMobile? innerWidth + 120 + 'px': innerHeight - 120 + 'px' }">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in swiperList" :key="index">
                <div class="swiper-slide-home flex flex-col justify-center items-center px-4"
                     :style="{ 'background-image': 'url(' + item.imgUrl + ')' }">

                    <div class="swiper-slide-home-title text-white mb-4 qx-animate">{{
                            item.title
                        }}
                    </div>
                    <div class="swiper-slide-home-desc text-white qx-animate">{{
                            item.desc
                        }}
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </div>

</template>
<script setup>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

// 导入Swiper模块
import {Autoplay, Navigation} from "swiper/modules";
// 注册Swiper模块
Swiper.use([Autoplay, Navigation]);


import {defineProps} from "vue";
import {onMounted, ref} from "vue";

// 定义props
const props = defineProps({
    swiperId: {
        type: String,
        default: 'swiper-container'
    },
    swiperList: {
        type: Array,
        default: () => []
    }
});


// 获取窗口大小
const innerWidth = ref(window.innerWidth);
const innerHeight = ref(window.innerHeight);
// 判断是否为移动端
const isMobile = ref(innerWidth.value < 768);

// 监听窗口大小变化
window.addEventListener('resize', () => {
    innerWidth.value = window.innerWidth;        // 获取窗口宽度
    innerHeight.value = window.innerHeight;      // 获取窗口高度
    isMobile.value = innerWidth.value < 768;      // 判断是否为移动端
});


// 组件挂载完成后初始化swiper
onMounted(() => {
    var swiper = new Swiper('#' + props.swiperId, {
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

})
</script>
<style lang="scss" scoped>
.swiper {
    width: 100%;
    .swiper-slide-home {
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        .swiper-slide-home-title {
            font-size: 36px;
            font-weight: lighter;
        }
        
        .swiper-slide-home-desc {
            font-size: 20px;
            font-weight: lighter;
        }
    }
}
</style>

6.组件的使用

<template>
    <TopSwiper :swiperList="swiperList" swiper-id="swiper-index"></TopSwiper>
</template>
<script setup>
import TopSwiper from "@/components/top-swiper/index.vue";
import {reactive} from "vue";

//轮播图数据
import backgroundImg2 from "@/assets/image/banner02.png";
//轮播图集合
const swiperList = reactive([
    {
        imgUrl: backgroundImg2,
        title: '我们能做什么',
        desc: ' 储能设备管理 | 光伏板 | 消费设备管理 | 任务工单 | 人员管理 | 在线缴费 | 设备保修',
        link: ''
    },
    {
        imgUrl: backgroundImg2,
        title: '我们能做什么',
        desc: ' 储能设备管理 | 光伏板 | 消费设备管理 | 任务工单 | 人员管理 | 在线缴费 | 设备保修',
        link: ''
    }
]);
</script>
<style scoped lang="scss">

</style>

7.依赖版本

 "dependencies": {
    "sass": "^1.32.13",
    "sass-loader": "^10.1.1",
    "swiper": "^11.1.14",
    "vue": "^3.4.37",
    "vue-router": "^4.4.5",
    "vite": "^5.4.1",
    "@vitejs/plugin-vue": "^5.1.2"
  },