是否可以将导航箭头放在 swiper 容器之外？

Question

是否可以像图中那样放置滑动导航箭头？如果是，怎么办？就像这样：https://imgur.com/a/9gEPbJE

我尝试制作风格化的块并将它们分类为原始的滑动箭头，但这似乎不起作用

Answer 1

是的，这是可能的。只需为您选择的箭头添加标记即可。在 Swiper 声明中使用选择器。

// HTML
    <div class="swiper swiper-carousel">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
        </div>
      </div>
      <div class="swiper-pagination"></div>
      <div class="swiper-left">🢐</div>
      <div class="swiper-right">🢒</div>
    </div>

    // JS
    $('.swiper-carousel').each(function(){
          var swiper = new Swiper(".swiper-carousel", {
            slidesPerView: 4,
            spaceBetween: 30,
            navigation: {
              nextEl: '.swiper-carousel .swiper-right',
              prevEl: '.swiper-carousel .swiper-left',
            },
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
          });
        });