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位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
- Tag: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
最新评论