Swiper 切换按钮放在轮播图元素以外的方法

Swiper 切换按钮默认是在轮播图元素以内的，比如下面这样：

很显然，这种样式用户友好度较差，因为切换按钮遮挡了主要的轮播内容，我们应该将切换按钮放在轮播图主体外面，像下面这样：

本文就介绍一种比较简单直观的实现方法，我们直接将切换按钮放到 swiper-container 容器外面，然后在 js 中通过 navigation 配置自定义的切换按钮元素即可。

<div class="swiper-container">
   <div class="swiper-slides"></div>
   <!-- 默认的切换按钮，这里我们直接注释掉，不需要

   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
   -->
</div>

<!-- 自定义的切换按钮，放在 swiper-container 容器元素外面 -->
<div class="swiper-button-prev-unique"></div>
<div class="swiper-button-next-unique"></div>

<script>
let carousel = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next-unique',
    prevEl: '.swiper-button-prev-unique'
  }
});
</script>