vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

最新推荐文章于 2023-12-20 17:15:16 发布

原创

最新推荐文章于 2023-12-20 17:15:16 发布 · 5.1k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了在Vue项目中如何引入和使用Swiper轮播插件，包括两种方法：方法一是直接下载Swiper，在组件内初始化并引入CSS；方法二是通过vue-cli搭建项目，引用swiper.js并在.babelrc中调整配置。推荐使用方法一，并提供了相关代码示例和常见问题的解决方法。

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

欢迎加入前端交流群来获取视频资料以及前端学习资料：749539640

              转载文章请注明出处！

如果只是要使用轮播效果的话可以参考下一些vue组件；比如这篇文章

--------2019.7.9------------------

请参考swiper官方插件：https://github.com/surmon-china/vue-awesome-swiper

--------2019.7.9------------------

方法一：（请先使用这种方法；更新于2018-05-14）

下载swiper：

npm install swiper --save-dev

swiper4.0使用入口：http://www.swiper.com.cn/usage/index.html；

html：

<div class="swiper-container">
   <div class="swiper-wrapper">
       <div class="swiper-slide">Slide 1</div>
       <div class="swiper-slide">Slide 2</div>
       <div class="swiper-slide">Slide 3</div>
   </div>
   <!-- 如果需要分页器 -->
   <div class="swiper-pagination"></div>
   
   <!-- 如果需要导航按钮 -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   
   <!-- 如果需要滚动条 -->
   <div class="swiper-scrollbar"></div>
</div>

在需要使用swiper的组件里引入swiper，swiper的初始化放在mounted里（可以把官网例子的启动 var mySwiper = 删掉）；

js：

<script>
import Swiper from 'swiper';
export default {
   
   
 name: 'HelloWorld',
 data () {
   
   
   return {
   
   
     msg: 'Welcome to Your Vue.js App'
   }
 },
 mounted(){
   
   
    new Swiper ('.swiper-container', {
   
   
   loop: true,
   // 如果需要分页器
   pagination: '.swiper-pagination'