容器外的滑动导航按钮

Question

我试图在滑动器容器外显示导航按钮，因为容器溢出：隐藏我必须用位置创建一个包装：相对并绝对定位按钮。

成功了，问题是现在导航按钮控制了所有滑块，我想不出解决这个问题的方法。

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

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>

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"。这为每个滑块导航箭头提供了不同的 class，因此它们将彼此独立工作

<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 nav buttons outside container

javascript

jquery

html

css

swiper