[英]Slick Carousel arrows are being cutoff, after adding Font-Awesome
I am working on a Carousel for my website Peruvian Connection. 我正在为我的网站Peruvian Connection工作Carousel。 I needed to style the arrows. 我需要设计箭头样式。 So I looked on the stackoverflow forums and found out that I can use Font-Awesome and its Unicode to change the shape and taste of the arrows(Thread here: How to style prev/next arrows button? ). 所以我查看了stackoverflow论坛,发现我可以使用Font-Awesome及其Unicode来改变箭头的形状和味道(这里的线程: 如何设置prev / next箭头按钮? )。 When changing the icons, they work perfectly in chrome. 更改图标时,它们在chrome中完美运行。 Although, they are cut off in IE and a bit buggy in other browsers.I researched this problem and found out it is due to the font-size of the arrows. 虽然,它们在IE中被切断,在其他浏览器中有点儿麻烦。我研究了这个问题,发现它是由于箭头的字体大小。
You can find a demo here: http://www.peruvianconnection.com/category/ads/lookbook.do?test=test 你可以在这里找到一个演示: http ://www.peruvianconnection.com/category/ads/lookbook.do?test = test
Tested Browsers: 经过测试的浏览器:
Chrome - Works Perfectly Chrome - 完美运作
Safari - Glitching a bit Safari - 有点毛躁
Firefox - Only works on a certain area. Firefox - 仅适用于某个区域。
IE 9,10,11 - Arrows are cut off. IE 9,10,11 - 箭头被切断。
Here is the code or the Slick-Theme.css 这是代码或Slick-Theme.css
@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
background: #fff url('./ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face
{
font-family: 'slick';
font-weight: normal;
font-style: normal;
src: url('./fonts/slick.eot');
src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev:before, .slick-next:before { font-family: FontAwesome; }
.slick-prev,
.slick-next
{
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 20px;
height: 20px;
margin-top: -10px;
padding: 0;
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
color:transparent;
outline: none;
background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
opacity: .25;
}
.slick-prev:before,
.slick-next:before
{
font-family: FontAwesome;
font-size: 40px;
line-height: 1;
opacity: .75;
color: brown;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev
{
left: -25px;
}
[dir='rtl'] .slick-prev
{
right: -25px;
left: auto;
}
.slick-prev:before
{
content: "\f0d9";
}
[dir='rtl'] .slick-prev:before
{
content: "\f0d9";
}
.slick-next
{
right: -25px;
}
[dir='rtl'] .slick-next
{
right: auto;
left: -25px;
}
.slick-next:before
{
content: "\f0da";
}
[dir='rtl'] .slick-next:before
{
content: content: "\f0da";
}
/* Dots */
.slick-slider
{
margin-bottom: 30px;
}
.slick-dots
{
position: absolute;
bottom: -45px;
display: block;
width: 100%;
padding: 0;
list-style: none;
text-align: center;
}
.slick-dots li
{
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
.slick-dots li button
{
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
opacity: 1;
}
.slick-dots li button:before
{
font-family: 'slick';
font-size: 6px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
opacity: .75;
color: black;
}
in you slick-theme.css remove line number 33 and 34. ie 在你slick-theme.css删除第33和34行。即
width: 20px;
height: 20px;
Tested in IE.11 and I hope it should work for other browsers as well. 在IE.11中测试过,我希望它也适用于其他浏览器。
Remove the width:20px; 删除宽度:20px; and the height:20px; 和高度:20px; on .slick-prev, .slick-next and it should work. 在.slick-prev,.slick-next,它应该工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.