swiper箭头改变颜色大小背景色

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

 导航按钮默认放在图片内 这里为了使导航按钮放在图片外面 所以把导航按钮的div放在swiper-container外面

1. <div class="right-container">

2. <div class="swiper-container">

3. <div class="swiper-wrapper" id="carousel"></div>

4. </div>

5. <!-- 导航按钮 -->

6. <div class="swiper-button-prev swiper-button-prev1"></div>

7. <div class="swiper-button-next swiper-button-next1"></div>

8. </div>

效果如下：

 

 轮播图左右箭头的颜色默认为蓝色  这里改为灰色

1. .swiper-button-next.swiper-button-next1{

2. width: 10%;

3. 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");

4. }

5. .swiper-button-prev.swiper-button-prev1 {

6. width: 10%;

7. 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");

8. }