swiper自定义左右切换按钮和样式

/*去掉默认CSS样式*/
.swiper-button-prev:after{
  display: none;
} 
.swiper-button-next:after{
  display: none;
} 
/*自定义CSS样式*/
.swiper-button-prev {
  background-size: 45px 45px;
  width: 45px;
  height: 45px;
  left:0%;
  top: 50%;
  /*background-image:url(./images/btn_left.png);*/
  background: #33333370;
  color: #fff;
  line-height: 45px;
  font-size: 25px;
  text-align: center; opacity: 0;
  transition: all 0.3s;
}
.swiper-button-next {
  background-size: 45px 45px;
  width: 45px;
  height: 45px;
  /*background-image: url(./images/btn_right.png);*/
  top: 50%;
  right: 0%;
  bottom: 10px;
  background: #33333370;
  color: #fff;
  line-height: 45px;
  font-size: 25px;
  text-align: center;
  opacity: 0;    
  transition: all 0.3s;
}
 // 鼠标移上去 显示左右按钮 
.topSlide:hover .swiper-button-next,
.topSlide:hover .swiper-button-prev{
    opacity: 1;
}