vue3中使用swiper7轮播图插件

已于 2022-08-23 10:35:11 修改
阅读量1.1w 收藏 96
点赞数 44
分类专栏： Vue框架 文章标签： vue3+swiper7 vue3+ts+swiper7 vue3 swiper7 轮播图
于 2021-11-16 18:03:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42063951/article/details/121354984
版权

文章目录

项目场景：

前不久刚在我的vue3项目中用了swiper6，坑真的是比农村的泥路还要多，这不官方直接来了个swiper7，接下来手把手教下大家怎么用，让大家少走弯路。

另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失

普通vue3项目：

win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。
在这里插入图片描述
之后在命令行里面输入vue create vue3
在这里插入图片描述
接着选择创建默认的vue3项目
在这里插入图片描述
接着用VSCode编辑器打开项目，在命令输入npm i swiper（swiper8出了可以指定一下版本npm i swiper@7），成功后package.json文件中会标上
在这里插入图片描述
接着我在官网找了个功能比较全的代码作为例子，如下：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>

我们把它拷到App.vue中全部替换掉之后执行，你会发现报css依赖不存在的错误，
在这里插入图片描述
我们打开node_modules文件夹，找到swiper文件夹，你会发现这下路径指向都是不明确的，所以接下来们要手动修改一下路径，
在这里插入图片描述
把js的路径换成vue文件夹下的swiper-vue.js
在这里插入图片描述
默认基础样式用swiper目录下的swiper.min.css
在这里插入图片描述
接着我们打开modules目录，把用到的组件路径都改一下，然后久违的绿它色终于出现了
在这里插入图片描述
如果嫌麻烦可以直接用总样式，在swiper目录下的swiper-bundle.css或者压缩版swiper-bundle.min.css，
在这里插入图片描述
然后你在浏览器看到的样子是这样的，麻的什么鬼，官方真的是(╯°Д°)╯︵┻━┻
在这里插入图片描述
这是因为官方例子里默认一次显示3个滑块，而例子只有3个swiper-slide，之后就用省略号了
在这里插入图片描述
我们把它改成1并且添加点样式后看下效果：
在这里插入图片描述
最终的代码：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";

/**
 * 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
 * bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
 */
// import "swiper/swiper-bundle.min.css";

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y],
    };
  },
};
</script>
<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
</style>

vue3+typeScript项目：

我们先在桌面打开命令行，输入vue create vue3-ts
在这里插入图片描述
我们选择自定义项目
在这里插入图片描述
接着选这三项就好了，其他可以先不用
在这里插入图片描述
选择3.x
在这里插入图片描述
之后的配置看着选，问题不大
在这里插入图片描述
同样的，先在命令输入npm i swiper（swiper8出了可以指定一下版本npm i swiper@7）把swiper7装上
在这里插入图片描述
因为ts的书写方式不一样，不可以直接用官方的例子，所以就不一一粘贴显示了，直接上改好了的，把下面的代码全部替换到App.vue文件就可以了，显示的效果是和普通项目一样的我就不展示了。


<template>
  <swiper
    :modules="modules"
    :slides-per-view="1"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script lang="ts">
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, A11y } from "swiper";

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/scrollbar/scrollbar.min.css";

/**
 * 如果嫌麻烦可以把上面的全部样式都删了，直接用总的
 * bundle：所有 Swiper 样式，包括所有模块样式（如导航、分页等）
 */
// import "swiper/swiper-bundle.min.css";


import { defineComponent } from "vue";

export default defineComponent({
  name: "",
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    const onSwiper = (swiper: any) => {
      console.log(swiper);
    };
    const onSlideChange = () => {
      console.log("slide change");
    };
    return {
      onSwiper,
      onSlideChange,
      modules: [Navigation, Pagination, Scrollbar, A11y],
    };
  },
});
</script>
<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
</style>

组件样式修改：

因为vue为了不让单页的样式污染全局，通常会在style标签加上scoped，这就导致了我们无法替换掉组件的样式，所以我们可以用::v-deep把样式抛出去替换到全局的，比方说我们要把swiper的pagination页面小圆点改成白色，那么样式就可以这样写：

<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: pink;
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet {
  background: rgb(255, 255, 255);
}
.swiper::v-deep .swiper-pagination .swiper-pagination-bullet-active {
  background: rgb(255, 255, 255);
}
</style>

当然，有些小伙伴会说我要用 CSS 预处理器，比方说scss，那么就可以用:deep()，这样写：

顺便提一下，目前vue3中并不支持最新版的sass，我们可以用4.14.1的 node-sass搭配7.3.1的sass-loader使用
npm install node-sass@^4.14.1 -D
npm install sass-loader@^7.3.1 -D

<style lang="scss" scoped>
.swiper:deep() {
  .swiper-slide {
    height: 300px;
    line-height: 300px;
    font-size: 30px;
    text-align: center;
    background-color: pink;
  }
  .swiper-pagination {
    .swiper-pagination-bullet {
      background: rgb(255, 255, 255);
    }
    .swiper-pagination-bullet-active {
      background: rgb(255, 255, 255);
    }
  }
}
</style>

效果：
在这里插入图片描述

关于垂直方向：

关于垂直方向的官方文档在这：#Vertical，但是目前给的vue的demo代码竟然还是6.x的，真的是(╯°Д°)╯︵┻━┻。好了，想要把轮播图设置为垂直方向，要在swiper标签里加上:direction="'vertical'"，这里注意了，vertical一定要有两对引号包裹的，不管单引号在里还是外，否则不生效，加了这个参数后你会发现滚动轮播图时会散架，所以还要给swiper设置实高，非要用百分比的话就在swiper标签外套一个div，在div里给个实际高度就好，具体看下面代码：

<template>
  <swiper
    :direction="'vertical'"
    :modules="modules"
    :pagination="{ clickable: true }"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Pagination } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Pagination]
    };
  },
};
</script>
<style scoped>
.swiper {
  height: 100vh;
}
.swiper-slide {
  height: 100%;
  line-height: 100vh;
  font-size: 30px;
  text-align: center;
  background-color: skyblue;
}
</style>

效果：

在这里插入图片描述

关于自动播放：

自动播放引入一下Autoplay 模块就好，没什么大问题。

<template>
  <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" :autoplay="{delay: 2500,disableOnInteraction: false}">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Pagination, Autoplay } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";
import "swiper/modules/autoplay/autoplay.min.css";

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Pagination, Autoplay],
    };
  },
};
</script>
<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: violet;
}
</style>

效果：在这里插入图片描述

关于无限循环：

需要开启无限循环的话在swiper标签上加入:loop="true"参数就可以了，但是你会发现swiper为了衔接多生成的两个swiper-slide并没有引用上我们自己设置的样式：
在这里插入图片描述

所以我们用deep处理一下就好:

<template>
  <swiper :modules="modules" navigation :loop="true">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
</template>
<script>
// import Swiper core and required modules
import { Navigation } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";
// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/navigation/navigation.min.css";
// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    return {
      modules: [Navigation]
    };
  },
};
</script>
<style scoped>
.swiper::v-deep .swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: lightgreen;
}
</style>

关于获取swiper实例：

获取swiper实例的官方地址：传送门，官方描述是可以直接useSwiper来使用swiper实例，但是我翻了一遍源码也没有看到哪里有抛出useSwiper挂钩，我感觉被耍了(╯°Д°)╯︵┻━┻，不过还好swiper组件初始化绑定的onSwiper里可以拿到swiper实例，并且Composition API 是直接在setup中定义方法，所以间接赋一下值就好，具体效果：
在这里插入图片描述

具体代码：

<template>
  <swiper :modules="modules" :slides-per-view="1" :space-between="50" :pagination="{ clickable: true }" @swiper="onSwiper">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
  </swiper>
  <view class="btn-view">
    <button @click="slidePrev">slidePrev</button>
    <button @click="slideNext">slideNext</button>
  </view>
</template>
<script>
// import Swiper core and required modules
import { Pagination } from "swiper";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue.js";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/modules/pagination/pagination.min.css";

// Import Swiper styles
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  setup() {
    let useSwiper = undefined;
    const onSwiper = (swiper) => {
      console.log(swiper);
      useSwiper = swiper
    };
    const slidePrev = () => {
      console.log(useSwiper)
      useSwiper.slidePrev()
    }
    const slideNext = () => {
      console.log(useSwiper)
      useSwiper.slideNext()
    }
    return {
      onSwiper,
      modules: [Pagination],
      slidePrev,
      slideNext
    };
  }
};
</script>
<style scoped>
.swiper-slide {
  height: 300px;
  line-height: 300px;
  font-size: 30px;
  text-align: center;
  background-color: beige;
}
.btn-view {
  display: flex;
  justify-content: center;
}
.btn-view button {
  margin: 20px;
}
</style>


over~~
爱唱歌的前端
关注
  • 44
    点赞
  • 踩
  • 96
    收藏
    觉得还不错? 一键收藏
  • 35
    评论
专栏目录
vue3使用swiper7
qq_25733937的博客
12-30 3819
vue3中使用swiper7
1.vue3.0+swiper7轮播图片插件填坑记录
yangyangdt的博客
01-11 2083
针对vue3+swiper7轮播插件的踩坑做一个记录，文中含已运行成功代码和注释。
vue3 - swiper插件 实现PC端的 视频滑动功能（仿抖音短视频）
weixin_42479421的博客
11-08 3019
使用swiper插件，实现pc端的视频滑动功能。
基于Vue3的Web端自定义轮播图动画效果（完整版保姆级教程，附源码）
最新发布
weixin_52231116的博客
05-20 2222
本文主要基于vue3制作web端自定义轮播图，以及添加相应的动画（完整版保姆级教程，附源码）
使用Vue3实现轮播图
a1357000424的博客
05-10 5650
使用轮播组件实现图片轮播效果
vue3实现简单轮播图
把全世界的花都给一个人
03-05 6779
app挂载 创建swiper组件 <div id="app"> <swiper :gallery="gallery" style="width:100%"></swiper> </div> css部分 <style type="text/css"> .swiper { position: relative; } .prev { position: absolute; l..
Vue3轮播图插件 vue-splide
哈
07-16 4692
VueSplide是一款用TypeSript写的轻量级轮播图组件，没有任何依赖，代码简单清晰，体积小巧。VueSplide的轮播过程动画非常细腻，滑动效果，末尾图片反弹效果流畅顺滑。另外VueSplide有多种轮播组合，单图轮播，N图轮播，聚焦轮播，分页轮播，垂直轮播等。示例效果https安装配置main.ts。...
vue使用swiper7
qq_38677540的博客
12-03 4261
下载 npm i swiper 使用 import { Swiper, SwiperSlide } from "swiper/vue/swiper-vue"; import "swiper/swiper.min.css"; <swiper :slides-per-view="2" :space-between="10"> <swiper-slide> </swiper-slide> &l
vue轮播图插件vue-awesome-swiper的使用代码实例
08-30
在组件中使用 vue-awesome-swiper 插件，我们需要在模板中添加 swiper 组件： `<template>` `<div>` `<swiper :options="swiperOption" ref="mySwiper">` `<!-- 这部分放你要渲染的那些内容 -->` `<swiper-...
vue轮播图插件vue-awesome-swiper
08-28
Vue-Awesome-Swiper 轮播图插件详解 Vue-Awesome-Swiper 是一个功能强大且灵活的 Vue.js 轮播图插件，支持 Vue.js 1.x 到 2.x 版本，兼顾 PC 和移动端，SPA 和 SSR 应用场景。下面将详细介绍 Vue-Awesome-Swiper 的...
基于vue.js轮播组件vue-awesome-swiper实现轮播图
12-03
一般做移动端轮播图的时候，最常用的就是Swiper插件了，而vue.js也有一个轮播组件vue-awesome-swiper，用法跟swiper相似。 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome...
vue3封装轮播图组件
qq_59737146的博客
08-25 3184
vue3封装轮播图组件
vue 使用swiper详细步骤
热门推荐
jjw_zyfx的博客
06-13 2万+
首先请参考下边这个连接，安装正确 https://blog.csdn.net/jjw_zyfx/article/details/117880298?spm=1001.2014.3001.5501
vue3中使用swiper7
Bejpse的博客
03-06 1405
项目场景： 前不久刚在我的vue3项目中用了swiper6，坑真的是比农村的泥路还要多，这不官方直接来了个swiper7，接下来手把手教下大家怎么用，让大家少走弯路。 另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失 普通vue3项目： win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。 之后在命令行里面输入vue create vue3 接着选择创建默认的vue3项
vue3使用swiper实现轮播图
weixin_60899185的博客
03-21 2533
vue3使用swiper实现简单轮播
swiper在vue中的使用
susuxhsji的博客
08-05 4582
swiper在vue中的使用 1.安装： npm i npm install swiper vue-awesome-swiper --save 这里同时安装了swiper和 vue-awesome-swiper，如果只安装swiper，在按照官方文档导入组件时将报错。 2.使用 局部使用 1）导入样式并注册组件，如果需要其他模组可参考官文文档自行添加 2）在template或dom中插入组件 3）在data中对options进行配置，详细可根据文档配置 全局使用 与局部区别在于要将导入的步骤写在.
vue3 swiper轮播图的实现
qq_44792224的博客
08-16 1480
modulesloop： 是否循环播放：控制一次显示几张轮播图： 每张轮播图之间的距离，该属性不可以和margin 属性同时使用；autoplay： 是否自动轮播， delay为间隔的毫秒数；disableOnInteraction属性默认是true，也就是当用户手动滑动后禁用自动播放， 设置为false后，将不会禁用，会每次手动触发后再重新启动自动播放。navigation： 定义左右切换箭头pagination： 控制是否可以点击圆点指示器切换轮播scrollbar。
Swiper、vue-awesome-swiper 插件使用
weixin_74285634的博客
06-26 1万+
swiper 及 vue-awesome-swiper 轮播插件
【Vue3 组件封装】vue3 轮播图组件封装
一个前端开发者
02-10 5222
项目中会多次使用到轮播图组件，但是轮播图渲染的数据是不一样的。但是轮播图的基本功能都是一样的，比如图片切换，自动播放等等。（1）父传子的方式将数据传给通用轮播图组件。（4）覆盖样式，控制箭头和小圆点的位置。目标: 基于pinia获取轮播图数据。文件中封装接口，用于获取轮播图数据。因此需要封装一个通用的轮播图组件。文件中定义轮播图数据的类型声明。（4）通过开发者工具查看数据。（1）通用轮播图的基本结构。（2）全局注册通用轮播图。（1）父组件传值给轮播图。（3）在广告组件中使用。（3）轮播图的播放逻辑。
vue使用swiper实现轮播图
09-17
使用vue实现轮播图可以通过引入vue-awesome-swiper插件来实现。首先，使用npm安装vue-awesome-swiper插件，运行命令npm install vue-awesome-swiper --save。然后，在main.js中引入插件，使用import VueAwesomeSwiper from 'vue-awesome-swiper'。接下来，引入swiper的js文件和css文件，使用import Swiper from 'swiper'和import 'swiper/css/swiper.css'。最后，通过异步请求从服务器获取轮播图数据，并使用v-for渲染在轮播图页面结构中。请注意，需要等轮播图页面结构渲染数据完成后，再实例化swiper实例，才能使轮播图的动态效果生效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 35
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值