Swiper轮播插件中修改左右箭头颜色

 导航按钮默认放在图片内 这里为了使导航按钮放在图片外面 所以把导航按钮的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");
        }  

参考的文章地址为：Swiper中关于前进后退按钮修改箭头颜色_一位不断进步的猿人-CSDN博客