如何自定义Swiper中的箭头按钮

7 浏览
0 Comments

如何自定义Swiper中的箭头按钮

我该如何从swipers自定义下面的箭头按钮？





我粗略地尝试过，但似乎不是正确的方法，因为按钮的右侧有一些间距。








完整的代码：



.swiper-container {
  width: 100%;
  height: 450px;
}
.swiper-slide {
  /* 垂直居中显示幻灯片文本 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide {
  font-size: 18px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.swiper-banner-slide {
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center;
}
.swiper-slide .title {
  font-family: 'Bellefair', serif;
  font-size: 41px;
  line-height: 40px;
  font-weight: 300;
}
.swiper-slide .subtitle {
  font-size: 21px;
}
.swiper-slide .text {
  font-size: 21px;
  letter-spacing: 1px;
}
.slide-info-container {
  color: #000;
}
.swiper-block {
  padding: 40px 0 40px;
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  /*padding: 0;*/
}
.swiper-block .swiper-container {
  width: 100%;
  height: 300px;
  margin: 20px auto;
}
.swiper-block .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* 垂直居中显示幻灯片文本 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}


















    
          
                
Aliquam dictum mattis velit 1

                  Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo. Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod. 
                更多细节
          
          
                
Aliquam dictum mattis velit 2

                  Aliquam hendrerit lorem at elit facilisis rutrum. Ut at ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec, tincidunt ut libero. Aenean feugiat non eros quis feugiat.
                更多细节
          
          
                
Aliquam dictum mattis velit 3

                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. 
                更多细节
          
          
                
Aliquam dictum mattis velit 4

                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla laoreet justo vitae porttitor porttitor. 
                更多细节
          
          
                
Aliquam dictum mattis velit 5

                  Nulla laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
                更多细节
          
      
      
    
    
                    
                            幻灯片1
                            幻灯片2
                            幻灯片3
                            幻灯片4
                            幻灯片5
                            幻灯片6
                            幻灯片7
                            幻灯片8
                            幻灯片9
                            幻灯片10
                        







我不想要这个间距。


有什么想法吗？


编辑：


如何将箭头上的蓝色改为黑色？




.swiper-button-next,
.swiper-button-prev {
    background-color: white;
    background-color: rgba(255, 255, 255, 0.5);
    right:10px;
    padding: 30px;
    color: #000 !important;
    fill: black !important;
    stroke: black !important;
}





当然不起作用！

															

							

															

						

						
0