swiper 自定义左右箭头样式 将箭头移出容器
关键点:1.在".swiper-container"外层套一个父级容器“.swiper-father”,并让其position:relative;2.重点:箭头相关的两行代码,要从“.swiper-container”移出来,放在“.swiper-father”下css代码:.swiper-father {position: relative;padding:0 37px...
·
关键点:
1.在".swiper-container"外层套一个父级容器“.swiper-father”,并让其position:relative;
2.重点:箭头相关的两行代码,要从“.swiper-container”移出来,放在“.swiper-father”下
css代码:
.swiper-father {
position: relative;
padding:0 37px;
width: 100%;
box-sizing:border-box;
border:1px solid red;
}
.swiper-father .swiper-button-next,.swiper-father .swiper-button-prev {
width: 37px;
height: 108px;
text-align: center;
display: block;
margin-top: -54px;
}
.swiper-father .swiper-button-prev {
background: #fafafa url("../public/images/swiper-left.png") no-repeat center center;
left:0
}
.swiper-father .swiper-button-next {
background: #fafafa url("../public/images/swiper-right.png") no-repeat center center;
right:0
}
.swiper-container {
width:calc(100% - 30px);
margin:auto;
}
.swiper-slide {
height: 120px;
width: 100%;
box-sizing: border-box;
border:1px solid #f00;
}
html代码:
<div class="swiper-father">
<div class="swiper-container" id="competitionEntries">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
<div class="swiper-slide">slider4</div>
<div class="swiper-slide">slider5</div>
<div class="swiper-slide">slider6</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!--如果箭头需要放在里面(官网效果),add Arrows下的两句代码需要移到此处-->
</div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
js代码:
var competitionEntries = new Swiper('.swiper-container', {
autoplay: true,//可选选项,自动滑动
slidesPerView: 3,
spaceBetween: 15,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
更多推荐
已为社区贡献1条内容
所有评论(0)