Javascript 集装箱外的Swiper导航按钮

我试图在swiper容器外显示导航按钮，因为容器溢出：隐藏，我必须创建一个带有位置：相对和绝对位置按钮的包裹

这是可行的，问题是现在导航按钮控制所有的滑块，我想不出一个办法来解决这个问题

我不想初始化多个不同类的滑块，如果滑块是相同的不同内容

var sliderProdutosDestaque=新的Swiper（'.slider produtos destaque.Swiper容器'{
幻灯片视图：2，
间隔时间：10，
导航：{
nextEl:“.swiper next”，
prevEl:“.swiper prev”，
}
});
正文{
填充：20px 60px 40px；
}
.滑块产品包装{
位置：相对位置；
宽度：100%；
边缘顶部：20px；
}
.滑梯{
z指数：1；
高度：150像素；
背景：蓝色；
}
.swiper-prev，
斯威普先生，下一个{
宽度：60px；
高度：60px；
背景：红色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
边界半径：60px；
z指数：9999；
}
.swiper prev{
左：-30px；
}
斯威普先生，下一个{
右：-30px；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片1
幻灯片2
幻灯片3
一种可能的解决方案是在包含滑块容器的元素之间循环，然后抓住所需的元素（Swiper、Next Btn、Prev Btn），并在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
        }
  });
}

var x=document.getElementsByClassName（“slider-produtos-wrap”）；
对于（变量i=0；i

简单、小巧、整洁


document.querySelectorAll（'.swiper container'）.forEach（函数（elem）{
新泳衣{
幻灯片视图：2，
间隔时间：10，
导航：{
nextEl:elem.nextElementSibling.nextElementSibling，
prevEl:elem.nextElementSibling，
}
});
});
正文{
填充：20px 60px 40px；
}
.滑块产品包装{
位置：相对位置；
宽度：100%；
边缘顶部：20px；
}
.滑梯{
z指数：1；
高度：150像素；
背景：蓝色；
}
.swiper-prev，
斯威普先生，下一个{
宽度：60px；
高度：60px；
背景：红色；
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
边界半径：60px；
z指数：9999；
}
.swiper prev{
左：-30px；
}
斯威普先生，下一个{
右：-30px；
}

幻灯片1
幻灯片2
幻灯片3
幻灯片1
幻灯片2
幻灯片3
对于任何可能觉得它有用的人来说，这是另一种方式。作为道具传入计数，每个滑块具有不同的值。我确实数过了“1”和“2”。这为每个滑块导航箭头提供了不同的类，因此它们将彼此独立工作

<div :class="'swiper-button-prev-' + count" slot="button-prev"></div>
<div :class="'swiper-button-next-' + count" slot="button-next"></div>

props: ['count'],
data() {
  return {
    swiperOption: {
    slidesPerView: 'auto',
    spaceBetween: 45,
    grabCursor: true,
    centerInsufficientSlides: true,
    navigation: {
      nextEl: `.swiper-button-next-${this.count}`,
      prevEl: `.swiper-button-prev-${this.count}`
    }
  }
}


道具：[“计数”]，
数据（）{
返回{
开关选项：{
SlideService视图：“自动”，
间隔：45，
格雷博：是的，
中心不足幻灯片：正确，
导航：{
nextEl:`.swiper按钮下一步-${this.count}`，
prevEl:`.swiper按钮prev-${this.count}`
}
}
}
效果很好。如果幻灯片在开头或结尾，您知道有没有办法禁用按钮？
.swiper-container {
    width: 100%;
    height: 400px;
    padding: 0 50px;
}
.swiper-container::before{
    content: "";
    display: block;
    background: #fff;
    left: 0;
    position: absolute;
    top: 0;
    height: 400px;
    width: 40px;
    z-index: 9;
}
.swiper-container::after{
    content: "";
    display: block;
    background: #fff;
    right: 0;
    position: absolute;
    top: 0;
    height: 400px;
    width: 40px;
    z-index: 9;
}