スタイルを設定する方法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/