导航按钮默认放在图片内 这里为了使导航按钮放在图片外面 所以把导航按钮的div放在swiper-container外面
<div class="right-container">
<div class="swiper-container">
<div class="swiper-wrapper" id="carousel"></div>
</div>
<!-- 导航按钮 -->
<div class="swiper-button-prev swiper-button-prev1"></div>
<div class="swiper-button-next swiper-button-next1"></div>
</div>效果如下：
轮播图左右箭头的颜色默认为蓝色 这里改为灰色
.swiper-button-next.swiper-button-next1{
width: 10%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%236a708e'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-prev1 {
width: 10%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%236a708e'%2F%3E%3C%2Fsvg%3E");
} 