Swiper插件快速入门指南-优快云博客

本文链接：https://blog.youkuaiyun.com/Aurora_sm/article/details/120941317

Swiper是一款开源、免费且功能强大的滑动插件，适用于手机和电脑网页，可用于创建焦点图、tab导航等。本文将简单介绍Swiper3的下载和基本使用方法，包括加载所需文件、HTML结构设置及初始化Swiper。

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

swiper介绍

swiper插件：开源、免费、强大的触摸滑动插件，

简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等，比如常见轮播图就可以用这个实现。

官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

swiper3地址：Swiper3|Swiper中文网

这里简单介绍一下swiper3版本的简单使用方法：

1、下载swiper

链接：

下载Swiper - Swiper3|Swiper中文网

2、使用

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

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

HTML内容。把 Slide 1到3 换成img标签即可实现轮播图

<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：最好是挨着标签(其实就是页面加载完成后加载)

<script>        
  var mySwiper = new Swiper ('.swiper-container', {
    //direction: 'vertical',默认是垂直方向
    loop: true,//循环滚动
    
    // 如果需要分页器
    pagination: '.swiper-pagination',
    
    // 如果需要前进后退按钮
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    
    // 如果需要滚动条
    //scrollbar: '.swiper-scrollbar',
  })        
</script>

注意：如果不想使用某个功能,需要将对应的html和js的内容都删掉(注释掉),否则可能会报错.