swiper中swiper-pagination中的位置设置方法
发布时间:2024-06-24 16:38:38 作者:Lan.W 我要评论
这篇文章主要介绍了swiper中swiper-pagination中的位置设置方法,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
需求:
期望swiper-pagination 导航靠右下角
解决:
可以配置clickableClass这个属性,属性值指定的是你自定义的class类名。
swiper实例,导航paination,添加clickableCalss属性:
var mySwiper = new Swiper('.swiper-container',{ pagination:{ el: '.swiper-pagination', clickable: true, clickableClass : 'my-pagination-clickable', }, })
然后在css中定义.my-pagination-clickable。
/*增加自定义css class*/ .swiper .my-pagination-clickable { width: 1200px; text-align: right; }
根据我的期望效果是让导航靠右下角。原css配置样式写死了left:0,所有只要把left:0冲掉,然后让导航在右边就可。
最终实现的效果:
html完整源码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="swiper-bundle.min.css"> <!-- Demo styles --> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper { width: 1226px; height: 460px; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } /*增加自定义css class*/ .swiper .my-pagination-clickable { width: 1200px; text-align: right; } </style> </head> <body> <!-- Swiper --> <div class="swiper mySwiper"> <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 class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <div class="swiper-pagination"></div> </div> <!-- Swiper JS --> <script src="swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> // 初始化轮播图 let swiper = new Swiper(".mySwiper", { spaceBetween: 30, centeredSlides: true, autoplay: { delay: 2500, disableOnInteraction: false, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", clickable: true, clickableClass: 'my-pagination-clickable' }, }); </script> </body> </html>
页面刷新导航栏漂移问题
可以参考以下配置试试
/*增加自定义css class*/ .swiper .my-pagination-clickable { width: auto; bottom: 26px; right: 30px; text-align: right; }
到此这篇关于swiper中swiper-pagination中的位置怎么设置的文章就介绍到这了,更多相关swiper-pagination位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
swiper中swiper-pagination中的位置设置方法
这篇文章主要介绍了swiper中swiper-pagination中的位置设置方法,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-24CSS3 @font-face 规则之自定义与网络字体全面指南(推荐)
CSS3的@font-face规则及其对网络字体的支持为网页设计带来了无限可能,无论自托管还是引用第三方服务,都能轻松实现字体的个性化选择与应用,这篇文章主要介绍了CSS3 @font2024-06-21- CSS3媒体查询是一种用于根据设备的特性和特定条件来应用不同样式的CSS技术,媒体查询使用@media规则来定义,本文给大家介绍CSS3媒体查询简介与使用方法,感兴趣的朋友一起2024-06-14
- CSS是一种强大的样式表语言,可以为网页添加各种各样的样式和效果,而CSS3作为CSS的第三个版本,引入了许多新的样式属性和用法,为我们提供了更多创意和自由度,本文将介绍一2024-06-11
CSS3 max/min-content及fit-content、fill-available值的案例详解
在CSS3中对width的值多了几个值:fill-available,max-content,min-content, 以及fit-content,本文通过案例讲解CSS3 max/min-content及fit-content、fill-available值的相2024-06-11- 这篇文章主要介绍了CSS3 grid 布局的简单使用示例详解,可以选择使用 absolute 绝对定位为这些块元素定位,也可以使用多个盒子嵌套来实现,结合实例代码给大家介绍的非常详细2024-06-04
- 媒体查询可以根据设备特性,如屏幕宽度、高度、设备方向(横向或纵向),为设备定义独立的CSS样式表,这篇文章主要介绍了CSS3媒体查询与页面自适应,需要的朋友可以参考下2024-05-29
ElementUl 中时间线Timeline 的样式优化方案
这篇文章主要介绍了ElementUl 中时间线Timeline 的样式优化方案,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-05-29- 在CSS3中,var()函数是一个用于插入CSS自定义属性(也称为CSS变量)的值的函数,它允许你在样式表中定义可重用的值,并在多个地方引用它们,从而使你的CSS更加灵活和可维护2024-05-21
- 当页面body拥有zoom属性之后,鼠标划过echarts图表时,触发位置就不正常,这篇文章主要介绍了echarts图表鼠标悬停时图例错位的解决方案,需要的朋友可以参考下2024-05-15
最新评论