jquery swiper插件的用法

news2024/11/15 8:35:50

一、Swiper插件简介

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

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

二、加载插件

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

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

    <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css" rel="stylesheet">

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

<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

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

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

2.1

<link rel="stylesheet" href="../css/swiper-bundle.min.css">

2.2

<script src="../js/swiper-bundle.min.js"></script>

2.3

<script type="text/javascript" src="../js/jquery-3.1.0.min.js"></script>

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

三、编写HTML结构

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

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../images/1.jpg" alt="image 1" /></div>
        <div class="swiper-slide"><img src="../images/2.jpg" alt="image 2" /></div>
        <div class="swiper-slide"><img src="../images/1.jpg" alt="image 3" /></div>
        <!-- 更多 slide -->
    </div>
<!--     如果需要分页器-->
    <div class="swiper-pagination"></div>
<!--     如果需要导航按钮-->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<div class="switch">
    <button id="prevBtn" >上一张</button>
    <button id="nextBtn" >下一张</button>
</div>

四、初始化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容器之外‌。

<style type="text/css">
        .swiper-container {
            display: block;
            width: 450px;
            height: auto;
        }
        body {
            margin: 50px;

        }
        img {
            width: 450px;
            height: auto;
            cursor: pointer;
        }
        #img1 {
            width: 450px;
            height: auto;
            border: 1px solid #ff0000;
        }
        .switch {
            text-align: center;
        }
        .switch button {
            width: 150px;  /* 设置按钮的宽度 */
            height: 50px;  /* 设置按钮的高度 */
            padding: 10px 20px;  /* 按钮内部的空间 */
            background-color: #4CAF50;  /* 按钮的背景颜色 */
            color: white;  /* 文本颜色 */
            border: none;  /* 无边框 */
            border-radius: 5px;  /* 边框圆角 */
            cursor: pointer;  /* 鼠标光标变成手指形状 */
            font-size: 16px;  /* 文本大小 */
        }
        .switch button:hover {  /* 鼠标悬停时的样式 */
            background-color: #45a049;
        }
    </style>

最后展示的效果图片

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