如何樣式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/