vue中如何使用swiper

最新推荐文章于 2024-07-08 05:06:13 发布

AriD_shea

最新推荐文章于 2024-07-08 05:06:13 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/alegria_x/article/details/98383796

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在vue-cli中如何使用swiper插件做轮播图

第一次使用可能会有点摸不透，但是通过相互之间的对比，并且在了解生命周期函数之后，并没有什么难的。

一、不使用框架的情况下

这是swiper官方给出的使用方法

分为了四部分：

1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件

<!DOCTYPE html>
<html> 
	<head>   
    	...    
			<link rel="stylesheet" href="dist/css/swiper.min.css">
	</head>
	<body>     
	...   
	<script src="dist/js/swiper.min.js"></script>   
		... 
	</body> 
</html>

2.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>

3.你可能想要给Swiper定义一个大小，当然不要也行。

.swiper-container {   
	width: 600px;    
	height: 300px; 
}

4.初始化Swiper：最好是挨着标签

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>
</body>

二、在vue中使用swiper

因此，在vue-cli 中使用swiper也是同样的步骤，只不过有些稍微的改动，可以对比记忆更方便。

1、把之前直接引入swiper.min.js的方式改为，在项目文件下使用npm i swiper安装

npm i swiper

2、把swiper.min.css下载然后拷贝到脚手架assets文件夹下

3、

js中引入swiper.min.js，

style中引入swiper.min.css，

template中放入原本放入html中的代码

<script>
import Swiper from "swiper"
export default {
    name:"swiperpic",
    data:function(){
        return {

        }
    },
}
</script>

<style scoped="scoped">
@import"../../assets/swiper.css";//后跟的是swiper.css的相对路径
.swiper-container{
    width: 359px;
    height: 172px;
    }
</style>

<template>

<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>
</template>

4、将初始化Swiper的代码，放入mounte生命周期函数中，因为要操作DOM，而只有挂载后才能获取到DOM元素。

<script>
import Swiper from "swiper"
export default {
    name:"swiperpic",
    data:function(){
        return {

        }
    },
    mounted:function(){
     var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })   
    }
}
</script>

AriD_shea

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue中如何使用swiper

在vue-cli中如何使用swiper插件做轮播图第一次使用可能会有点摸不透，但是通过相互之间的对比，并且在了解生命周期函数之后，并没有什么难的。一、不使用框架的情况下这是swiper官方给出的使用方法分为了四部分：1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件<!DOCTYPE html><html> &l...
复制链接

扫一扫