在容器外滑动导航按钮
问题说明
由于容器溢出,我试图将导航按钮显示在swiper容器外部:隐藏的我不得不创建一个带有位置的包装:相对且绝对定位按钮.
I'm trying to display the nav buttons outside the swiper container, because of the container overflow: hidden i had to create a wrap with position: relative and position the buttons absolutely.
那行得通,问题在于现在导航按钮控制着所有滑块,而我想不出一种解决方法.
That worked, the problem is that now the nav buttons control all sliders and i can't figure out a way to solve this.
如果滑块的内容相同,我不想初始化多个具有不同类的滑块.
I don't want to initialize multiple sliders with different classes if the slider is the same with different content.
var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
}
});
body {
padding: 20px 60px 40px;
}
.slider-produtos-wrap {
position: relative;
width: 100%;
margin-top: 20px;
}
.swiper-slide {
z-index: 1;
height: 150px;
background: blue;
}
.swiper-prev,
.swiper-next {
width: 60px;
height: 60px;
background: red;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 60px;
z-index: 9999;
}
.swiper-prev {
left: -30px;
}
.swiper-next {
right: -30px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/css/swiper.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.1.0/js/swiper.min.js"></script>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<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>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
<div class="slider-produtos-wrap">
<div class="slider-produtos-destaque swiper-container">
<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>
</div>
<div class="swiper-prev"></div>
<div class="swiper-next"></div>
</div>
正确答案
一种可行的解决方案是遍历包含滑块容器的元素,然后获取所需的元素(Swiper,Next Btn,Prev Btn)和在Swiper的设置中使用此功能.
A possible solution is to loop through the elements that contain the slider container, and then grabbing the elements that are required (Swiper, Next Btn, Prev Btn) and using this in the setup for the Swiper.
var x = document.getElementsByClassName("slider-produtos-wrap");
for(var i = 0; i < x.length; i ) {
var el = x[i];
var swiper = el.getElementsByClassName("swiper-container")[0];
var nx = el.getElementsByClassName("swiper-next")[0];
var pr = el.getElementsByClassName("swiper-prev")[0];
new Swiper(swiper, {
slidesPerView: 2,
spaceBetween: 10,
navigation: {
nextEl: nx,
prevEl: pr
}
});
}
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /reply/detail/tanhcgkjhb
-
YouTube API 不能在 iOS (iPhone/iPad) 工作,但在桌面浏览器工作正常?
it1352 07-30 -
保持在后台运行的 iPhone 应用程序完全可操作
it1352 07-25 -
iPhone,一张图像叠加到另一张图像上以创建要保存的新图像?(水印)
it1352 07-17 -
使用 iPhone 进行移动设备管理
it1352 07-23 -
在android同时打开手电筒和前置摄像头
it1352 09-28 -
扫描 NFC 标签时是否可以启动应用程序?
it1352 08-02 -
检查邮件是否发送成功
it1352 07-25 -
Android微调工具-删除当前选择
it1352 06-20 -
希伯来语的空格句子标记化错误
it1352 06-22 -
Android App 和三星 Galaxy S4 不兼容
it1352 07-20