navigation - 在 swiper-container 外部显示导航箭头

Question

我试图在滑动容器外部而不是 slider 上显示导航箭头。 我尝试使用 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 溢出:隐藏，箭头不会显示；

因此，我尝试将导航箭头移到 swiper-container 之外，现在它们会显示，但会影响页面中的所有 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 .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,

        });
    });
});