我试图将.customer-logos
的箭头设置为http://jsfiddle.net/Guruprasad_Rao/q1qznouw/664/。到目前为止,我有https://jsfiddle.net/huten0wq/71/。左箭头大于右箭头,"前一个"和" next"仍然显示在下方,我无法让箭头略微显示在.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;
}
答案 0 :(得分:1)
箭头大小相同,均为.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 */
}
。但是,这是您正在寻找的调整。突出了重要的一线。
glm