swiper基础使用_swiper 基础使用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44486632/article/details/107900655

本文档介绍了在Vue项目中如何安装和使用Swiper 4.3.3版本。首先通过npm安装swiper，然后在组件内部导入并实例化Swiper对象。在HTML中设置轮播图内容，同时在CSS中为轮播图设定高度，确保其可以滚动。如果遇到轮播不工作的情况，尝试重启项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用script引入可以参考官网,这里记录一下在vue中使用

安装swiper

npm install swiper@4.3.3 --save
这里我安装的是4.3.3版本的为例,目前已经有6.x版本的

局部组件使用

1 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>

2在组件里导入 swiper 模块并实例化一个swiper对象(初始化)

<script>
导入swiper模块
import Swiper from 'swiper'
// 同时引入swiper的css文件
import 'swiper/dist/css/swiper.min.css'
export default {
	mounted(){
		this.$nextTick(() => {
			//一旦界面更新完成,则立即调用
			new swiper('.swiper-container',{
				autoplay:true, // 也可以设置具体的自动轮播时间
				pagination: {
					el: '.swiper-pagination', // 分页器的类
					clickable: true  // 设置为true时,点击分页器会控制swiper切换
				}
			})
		})
	}
}

3 css内容给轮播图设置一个高度

<style lang="scss">
	.swiper-container {
        height: 200px;
        .swiper-wrapper {
          height: 100%;
          width: 100%;
     }
    }
 </style>