swiper-如何将导航变为滚动条样式

向右看齐 2022-09-23 04:00 285阅读 0赞

本节内容介绍swiper当中如何将导航变为滚动条样式。  
   
首先我们搭建一个swiper页面的基本布局。

<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 class="swiper-slide">H5EDU 7<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 8<img src="logo.png"></div>
                    <div class="swiper-slide">H5EDU 9<img src="logo.png"></div>
                </div>
                <div class="swiper-scrollbar"></div>
            </div>

然后到JS部分添加初始化代码。

var swiper = new Swiper('.swiper-container',{
                    spaceBetween:30,
                    grabCursor:true,
                    slidesPerView:3,
                    centeredSlides:true,
                    scrollbar:'.swiper-scrollbar', //绑定分页导航
                    scrollbarHide:true  //开启导航在不活动时的隐藏
                });

可以注意到在本篇当中将分页导航的swiper-container改变为swiper-scrollbar，然后在初始化当中绑定导航。就可以实现了。当然，可以关闭导航条的隐藏效果

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS_如何设置滚动条样式_超出左右滚动

CSS-界面滚动时不显示滚动条设置滚动条的样式： div::-webkit-scrollbar { //width: 0; heig

矫情吗；*/ 2022年11月26日 01:57/ 0 赞/ 285 阅读

相关滚动条样式

<style scoped> .treeFssBox>>>::-webkit-scrollbar { width: 4px;

港控/mmm°/ 2022年11月01日 14:58/ 0 赞/ 163 阅读

相关 swiper-如何将导航变为滚动条样式

本节内容介绍swiper当中如何将导航变为滚动条样式。首先我们搭建一个swiper页面的基本布局。 <div class="swiper-contain

向右看齐/ 2022年09月23日 04:00/ 0 赞/ 286 阅读

相关 Swiper-页面垂直滚动样式

首先按照第一节课的内容，将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航

小咪咪/ 2022年09月23日 03:59/ 0 赞/ 362 阅读

相关滚动条样式

1.内发光效果： box-shadow: rgb(0, 187, 255) 0px 0px 8px inset !important; 2.滚动条样式 .histroy

╰+哭是因爲堅強的太久メ/ 2022年08月30日 04:27/ 0 赞/ 195 阅读

相关滚动条样式修改

<style> .innerbox::-webkit-scrollbar {/滚动条整体样式/ width: 4px;

淩亂°似流年/ 2022年02月25日 13:19/ 0 赞/ 346 阅读

相关 html 滚动条样式

转载：[https://www.cnblogs.com/yclblog/p/6806496.html][https_www.cnblogs.com_yclblog_p_6806

向右看齐/ 2021年12月22日 14:23/ 0 赞/ 300 阅读

相关滚动条样式css

![在这里插入图片描述][20190702143854151.png] / 滚动条 / ::-webkit-scrollbar { width:

深藏阁楼爱情的钟/ 2021年12月18日 13:37/ 0 赞/ 378 阅读

相关 css如何修改滚动条样式

默认滚动条样式如下： ![70][] 那如何修改呢？如下代码： <div class="inner"> <div class="innerbox

朱雀/ 2021年12月13日 05:02/ 0 赞/ 416 阅读

相关导航条样式代码

参考博文:[这里写链接内容][Link 1] <!DOCTYPE html> <html lang="zh-CN"> <head> <

绝地灬酷狼/ 2021年09月17日 07:06/ 0 赞/ 324 阅读