编程技术网

关注微信公众号,定时推送前沿、专业、深度的编程技术资料。

 找回密码
 立即注册

QQ登录

只需一步,快速开始

极客时间

在容器外滑动导航按钮:Swiper nav buttons outside container

hientrq docker 2022-5-10 15:14 5人围观

腾讯云服务器
在容器外滑动导航按钮的处理方法

由于容器溢出,我试图将导航按钮显示在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.

JSFiddle

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 <div swiper-container"> <div <div 1</div> <div 2</div> <div 3</div> </div> </div> <div <div </div> <div <div swiper-container"> <div <div 1</div> <div 2</div> <div 3</div> </div> </div> <div <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 } }); } 

JSFiddle

这篇关于在容器外滑动导航按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程技术网(www.editcode.net)!

腾讯云服务器 阿里云服务器
关注微信
^