swiper 自定义左右箭头样式 将箭头移出容器

关键点：

1.在".swiper-container"外层套一个父级容器“.swiper-father”，并让其position：relative；

2.重点：箭头相关的两行代码，要从“.swiper-container”移出来，放在“.swiper-father”下

css代码：

.swiper-father {
 position: relative;
 padding:0 37px;
 width: 100%;
 box-sizing:border-box;
 border:1px solid red;
}
.swiper-father .swiper-button-next,.swiper-father .swiper-button-prev {
 width: 37px;
 height: 108px;
 text-align: center;
 display: block;
 margin-top: -54px;
}
.swiper-father  .swiper-button-prev {
  background: #fafafa url("../public/images/swiper-left.png") no-repeat center center;
  left:0
}

.swiper-father .swiper-button-next {
  background: #fafafa url("../public/images/swiper-right.png") no-repeat center center;
  right:0
}
.swiper-container {
 width:calc(100% - 30px);
 margin:auto;
}
.swiper-slide {
  height: 120px;
  width: 100%;
  box-sizing: border-box;
  border:1px solid #f00;
 }

html代码：

<div class="swiper-father">
  <div class="swiper-container" id="competitionEntries">
     <div class="swiper-wrapper">
       <div class="swiper-slide">slider1</div>
       <div class="swiper-slide">slider2</div>
       <div class="swiper-slide">slider3</div>
       <div class="swiper-slide">slider4</div>
       <div class="swiper-slide">slider5</div>
       <div class="swiper-slide">slider6</div>
     </div>
     <!-- Add Pagination -->
     <div class="swiper-pagination"></div>
     <!--如果箭头需要放在里面（官网效果），add Arrows下的两句代码需要移到此处-->
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

js代码：

var competitionEntries = new Swiper('.swiper-container', {
        autoplay: true,//可选选项，自动滑动
        slidesPerView: 3,
        spaceBetween: 15,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        }
    })