Question

我正在尝试在滑块容器外显示导航箭头，而不是滑块上方。我尝试用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-container CSS overflow：hidden;

，箭头不会显示

所以我尝试将导航箭头移动到swiper-container外面，现在它们显示但是它们会影响页面中的所有Swipers。

我的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
    });

有什么想法吗？

Answer 1

你的解决方案不太好。只是尝试使用swiper-button-prev和swiper-button-next的其他名称。并为position：relative创建另一个内部滑块。例如：

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

和js：

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

的CSS：专辑 - 滑块设置位置：relatve; 而对于album-slider__wrapper宽度：80％; 或者如果你需要滑块宽度：100％;然后左右设置导航按钮 -30px

Answer 2

我想出了一个解决方案！

使用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-container外面显示导航箭头

2 个答案: