Question

我试图在swiper容器外面显示导航按钮，因为容器溢出：隐藏我必须创建一个包含position：relative的包裹并绝对定位按钮。

有效，问题是现在导航按钮控制所有滑块，我无法找到解决此问题的方法。

如果滑块相同且内容不同，我不想初始化具有不同类别的多个滑块。

＆＃13;

var sliderProdutosDestaque = new Swiper('.slider-produtos-destaque.swiper-container', {
  slidesPerView: 2,
  spaceBetween: 10,
  navigation: {
    nextEl: '.swiper-next',
    prevEl: '.swiper-prev',
  }
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

一种可能的解决方案是循环包含滑块容器的元素，然后抓取所需的元素（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
        }
  });
}

JSFiddle

Answer 2

简单，小巧，整洁。

document.querySelectorAll('.swiper-container').forEach(function(elem) {
  new Swiper(elem, {
    slidesPerView: 2,
    spaceBetween: 10,
    navigation: {
      nextEl: elem.nextElementSibling.nextElementSibling,
      prevEl: elem.nextElementSibling,
    }
  });
});

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>

Answer 3

对于任何可能会发现有用的人的另一种方法。传递作为道具的道具，每个滑块的值不同。我做了count =“ 1”和count =“ 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}`
    }
  }
}

Answer 4

.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;
}

Swiper导航按钮在容器之外

4 个答案: