swiper的基础使用（十三）_var feature=$(`.swiper-container').swiper-优快云博客

本文链接：https://blog.youkuaiyun.com/never__ends/article/details/51752611

本文详细讲解如何在Swiper页面中添加上一页和下一页的控制按钮。首先建立基本的Swiper布局，将按钮div添加到swiper-container内。接着在JavaScript部分初始化Swiper实例，并绑定nextButton和prevButton类，实现翻页功能。通过调整类名，可以自定义控制按钮的样式和行为。

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

本次内容我们介绍在swiper页面当中添加控制按钮（可以控制翻页上一页和下一页）。

首先搭建基础的swiper页面布局。然后我们主要将翻页按钮的div（.swiper-button-next/prev）加到外部容器(.swiper-container)当中.

 <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">H5EDU 1<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 2<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 3<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 4<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 5<img src="logo.png"></div>
                <div class="swiper-slide">H5EDU 6<img src="logo.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

然后到js部分初始化函数并且绑定翻页按钮的类。

 var swiper = new Swiper('.swiper-container',{
                pagination:'.swiper-pagination',
                paginationClickable:true,
                spaceBetween:30,
                nextButton:'.swiper-button-next',//绑定下一页的控制按钮
                prevButton:'.swiper-button-prev'//绑定上一页的控制按钮
            });

我们可以通过类名来改变控制按钮的颜色。并且控制按钮会随着我们的属性改变而改变为对应的样式或添加功能