如何设置jQuery光滑箭头的样式

时间:2017-02-10 13:11:58

标签: jquery html css

我试图将.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;
}

1 个答案:

答案 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

https://jsfiddle.net/mbj7ckrs/