swiper将箭头移动到轮播图外面（看起来在外侧，实际上还在swiper-container内）
写页面时碰到设计图中的轮播图箭头在外面的情况，于是自己写了下。
效果如下：
需求是 版心宽度为1400px，左右箭头需要在版心之外45px处 ，1400px的宽度内显示4张图片，每两张之间的间距是20px
1.swiper-container宽度写为实际宽度1490px，css应该写为：width:1400px,margin:0 auto;padding:0 45px;overflow: hidden;
2.需要显示四个swiper-slide，每个间隔为20px，所以swiper的js中需要加入slidesPerView:4, spaceBetween:20,
因为swiper-slide之间的间距是20px，所以swiper-show的宽度应该是1400+20=1420；
3.在两个箭头.swiper-button-next和.swiper-button-prev外增加一个div标签，这里我写的是：
4.将.arr_left和.arr_right的高度写为100%,要撑满下图中的蓝色框，宽度设置为swiper-container的padding宽度45px，背景色一定要写，是用来挡住swiper-slide在这两处的内容的，与页面背景色保持一致就好
5.根据需求来写两个箭头.swiper-button-next和.swiper-button-prev的样式，这里我用的是两张箭头的图片。
代码如下：
html+默认js：
css：
.swiper-container{ width: 1400px; padding: 0 45px; margin: 0 auto; overflow: hidden; } .swiper-show{ width: 1420px; } .images{ height: 190px; background-color: pink; } .expo-bot .arr_left, .expo-bot .arr_right{ position: absolute; top: 0; background-image: none; width: 45px; height: 100%; background-color: #fff; z-index: 999; } .expo-bot .swiper-button-prev, .expo-bot .swiper-button-next{ position: absolute; display: inline-block; width: 26px; height: 42px; z-index: 999; top: 50%; transform: translateY(-50%); margin-top: 0; } .expo-bot .arr_left{ left: 0px; } .expo-bot .arr_right{ right: 0px; } .expo-bot .swiper-button-prev{ left: 0; background: url(../../../../images/expo/version/2022/arr-l.png) no-repeat; } .expo-bot .swiper-button-next{ right: 0; background: url(../../../../images/expo/version/2022/arr-r.png) no-repeat; }