如何样式jQuery光滑箭头

Question

我试图将.customer-logos的箭头样式设计为http://jsfiddle.net/Guruprasad_Rao/q1qznouw/664/。到目前为止，我有这个https://jsfiddle.net/huten0wq/71/。左侧的箭头比右侧的箭头更大，“上一个”和“下一个”仍然显示在下方，我不能让箭头稍微偏离.customer-logos的两侧，以便它们不超过标志。

.customer-logos button { 
position: absolute; 
top: 30%; 
z-index: 1; 
background-color: transparent; 
border-radius: 0px; 
border: 0px; 
padding: 10px; 
} 
.customer-logos button:nth-child(1) { 
left: 0; 
background-image: url("//cdn.shopify.com/s/files/1/1229/6958/files/arrow- 18_large.png?v=1486731677"); 
background-repeat: no-repeat; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-position: center; 
} 
.customer-logos button:nth-child(3) { 
right: 0; 
background-image: url("//cdn.shopify.com/s/files/1/1229/6958/files/arrow- 18_right_large.png?v=1486731840"); 
background-repeat: no-repeat; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-position: center; 
} 


.customer-logos { 
margin-bottom: 50px; 
} 
.customer-logos button { 
position: absolute; 
top: 50%; 
z-index: 1; 
} 
.customer-logos button:nth-child(1) { 
left: 0; 

} 
.customer-logos button:nth-child(3) { 
right: 0; 
} 
.slick-arrow.slick-hidden { 
display: none; 
} 

Answer 1

箭头的大小相同，均为20x33。不过，这里是你正在寻找的调整。重点线突出显示。

.customer-logos button { 
    position: absolute; 
    top: 30%; 
    z-index: 1; 
    background-color: transparent; 
    border-radius: 0px; 
    border: 0px; 
    padding: 10px; 
    text-indent: -99999px; /* getting rid of text */ 
    transform: translateY(-50%); /* vertical centering */ 
} 

.customer-logos { 
    margin-bottom: 50px; 
    padding: 0 40px; /* padding on both sides, for arrows */ 
} 

https://jsfiddle.net/mbj7ckrs/