jquery swiper插件的用法

一、Swiper插件简介

Swiper是一个纯JavaScript打造的滑动特效插件，面向手机、平板电脑等移动终端，同时也支持桌面浏览器。Swiper开源、免费、稳定、使用简单且功能强大，是架构移动终端网站的重要选择。

 它支持触摸滑动、响应式设计、循环滑动、分页器、滚动条等多种功能，非常适合用于轮播图、滑块导航等场景。以下是一个详细的Swiper插件教程及案例介绍。

二、加载插件

首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。

swiper-bundle.min.css文件 CDN地址：

swiper-bundle.min.js文件 CDN地址：

使用Swiper插件的步骤主要包括以下几个部分：

 ‌下载Swiper插件‌：首先，需要从Swiper的官网(https://swiper.com.cn/)下载Swiper插件。官网提供了多种版本的下载链接，包括压缩版和未压缩版，以及包含动画效果的版本等，可以根据项目需求选择合适的版本下载。
 ‌引入Swiper文件‌：下载完成后，将Swiper的CSS和JS文件引入到项目中。通常，这两个文件分别是swiper-bundle.min.css和swiper-bundle.min.js（文件名可能因版本而异）。例如，在HTML中引入这些文件的代码可能如下：

2.1

2.2

2.3

 Jquery.js 应该在Swiper.js之前引入文件；

三、 编写HTML结构

在HTML中编写Swiper的容器结构。添加HTML内容。Swiper7的默认容器是'.swiper'，Swiper6之前是'.swiper-container'。

    

        

        

        

        
    

    


    

    




    上一张
    下一张

四、初始化Swiper

使用JavaScript初始化Swiper：创建一个新的Swiper实例，并传入容器选择器和配置选项。例如，可以设置轮播的方向、是否循环播放、分页器的位置等‌

$(document).ready(function () {
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });

        $('#prevBtn').click(function () {
            swiper.slidePrev();
        });

        $('#nextBtn').click(function () {
            swiper.slideNext();
        });
});

五、编写style样式表

调整样式和功能‌：根据需要，可以为Swiper定义大小，并添加导航按钮、分页器等组件。这些组件可以放在Swiper容器之外‌。

最后展示的效果图片 

测试和调试‌：在浏览器中打开页面，测试Swiper的功能是否正常工作。根据需要调整代码和样式，确保良好的用户体验‌。

通过以上步骤，可以成功地将Swiper插件集成到网页中，实现图片轮播、轮播图、相册浏览等场景。Swiper插件的特点包括简单易用、支持多种轮播效果、高性能、支持响应式布局等，适用于移动端的网站和应用开发‌ 。