在容器外滑动导航按钮 [英] Swiper nav buttons outside container

问题描述

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

JSFiddle

这篇关于在容器外滑动导航按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！