javascript - SwiperJS - 如何将下一个/上一个箭头放在我的画廊容器之外？

Question

我希望箭头位于图片库容器之外，因为很难看到它们。我已经尝试删除元素并将它们放在画廊容器之外，但我没有得到任何结果。

不确定是否有更好的方法来实现这种外观或另一个简单的 javascript 库？

    var appendNumber = 4;
    var prependNumber = 1;

    var swiper = new Swiper('.swiper-container', {
      slidesPerView: 2,
      centeredSlides: false,
      spaceBetween: -410,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
    });

    document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide([
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
        ]);
    });

    document.querySelector('.prepend-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide('<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>');
    });

    document.querySelector('.append-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
    });
    
    document.querySelector('.append-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide([
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
        ]);
    });

.swiper-container {
    width: 70%;
    height: 500px;
    margin-top: 50px;
    position: relative;
    padding: 0 60px
}
  
  .arrow-left {
    position: absolute;
    top: 50%;
    left: 0;
  }
  
  .arrow-right {
    position: absolute;
    top: 50%;
    right: 0;
  }

.swiper-container .swiper-slide img {
    height: 400px;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 40px !important;
}

swiper-button-prev {
    background-color: white;
}

.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    content: 'next';
    color: yellowgreen;
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
    content: 'prev';
    color: yellowgreen;
}

        <section class="dest-gallery-container">
          <!-- Slider main container -->
          <!-- Swiper -->
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-1.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-2.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-3.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-4.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-5.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-6.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-7.png" alt="">
              </div>
              <div class="swiper-slide">
                <img src="/img/home/dest-gal-8.png" alt="">
              </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>

            <!-- Add Arrows -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
          </div>
        </section>

Answer 1

尝试这个。它们应该在 swiper-container 之外，但在您的 dest-gallery-container 中。还将 swiper-pagination 放在 swiper-wrapper 中。

<section class="dest-gallery-container">
    <!-- Slider main container -->
    <!-- Add Left Arrow-->
    <div class="swiper-button-prev"></div>
    <!-- Swiper -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-1.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-2.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-3.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-4.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-5.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-6.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-7.png" alt="">
        </div>
        <div class="swiper-slide">
          <img src="/img/home/dest-gal-8.png" alt="">
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <!-- Add Right Arrow -->
      <div class="swiper-button-next"></div>
    </div>
  </section>