Navigation 显示swiper容器外部的导航箭头

我试图在swiper容器外部而不是滑块上方显示导航箭头。 我试着用CSS定位：

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev{
    right:-20px;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next{
    background-image:url(assets/img/swiper-left.png);
    left:-20px;
}

但是箭头不会显示，因为swiper容器CSS溢出：隐藏

因此，我尝试将导航箭头移到刷卡器容器外，现在它们显示出来，但它们影响页面中的所有刷卡器

我的Swiper配置如下：

initialize swiper 
    */
    var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView: 2,
        spaceBetween: 30,
        loop: true
    });

---

有什么想法吗

我想出了一个解决办法

通过使用Jquery.each（）初始化Swiper。 这样，如果您将Swiper箭头移到Swiper容器外，它们将只控制与其相关的Swiper，并且您可以使用CSS将其放置在任何您喜欢的位置。同样的事情也应该适用于分页

jQuery(function(){ 
    $('.swiper-container').each(function( i ) {
        var mySwiper = new Swiper ($('.swiper-container')[i], {

                // Navigation arrows
                nextButton: $('.swiper-button-prev')[i],
                prevButton: $('.swiper-button-next')[i],

                // Optional parameters
                slidesPerView: 2,

        });
    });
});

---

你的解决方案不太好。只需尝试使用其他名称作为“swiper button prev”和“swiper button next”。然后再创建一个带位置的内部滑块：relative。 例如：

css: 对于相册滑块设置位置：relatve； 相册滑块包装宽度：80%； 或者，如果需要滑块宽度：100%；然后设置左右导航按钮

---

-30px

您的解决方案不太好？请解释一下。至于您的解决方案，如果内容是硬编码的，那么它将起作用，但对于动态内容则不起作用。

      <div class="album-slider">
        <div class="album-slider__wrapper  js_album-slider">
          <div class="swiper-wrapper">
            <div class="album-slider__item  swiper-slide">
              <img src="img/album1.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album2.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album1.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album2.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album1.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album2.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album1.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album2.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album1.jpg" alt="">
            </div>
            <div class="album-slider__item  swiper-slide">
              <img src="img/album2.jpg" alt="">
            </div>
          </div>
        </div>
        <div class="swiper-button-prev  album-slider__button-prev"></div>
        <div class="swiper-button-next  album-slider__button-next"></div>
      </div>

var mySwiperAlbum = new Swiper ('.js_album-slider', {
  nextButton: '.album-slider__button-next',
  prevButton: '.album-slider__button-prev',
  slidesPerView: 4,
  spaceBetween: 10,
  autoplay: 5000,
});