在刀式容器外显示导航箭头

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溢出：隐藏;

，箭头不会显示

所以我尝试将nav箭头移到刀式容器外面，现在它们显示，但它们会影响页面中的所有swiper。

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

我发现了解决方案！

用jQuery .east((初始化刀片。这样，如果您将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,
        });
    });
});

Answer 2

您的解决方案不是很好。只需尝试将其他名称用于Swiper-Button-Prev和Swiper-Button-Next即可。并为滑块创建另一个内在的位置：相对。示例：

      <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;并适用于专辑式__wrapper宽度：80％；或者，如果您需要滑块宽度：100％；然后设置为NAV按钮左右 -30px