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

最新推荐文章于 2025-06-11 16:00:55 发布

华玖

最新推荐文章于 2025-06-11 16:00:55 发布

阅读量2k

点赞数 5

CC 4.0 BY-SA版权

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

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

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