光滑滑块下一个箭头不显示

Question

我试图让下一个和上一个箭头显示在产品滑块旁边，就像 Slick Slider 示例一样。 但我的示例似乎没有加载适当的字体来实现这一点。

这是我的代码：

HTML

<div class="slider">
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100">
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100">
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100">
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100">
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100">
    </div>
    <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100">
    </div>
</div>

CSS

body{
    background-color: #fff;
}
.slider{
    margin: 60px auto;
    width: 500px;
}
div{
    height: 100%;
}
p{
    text-align: center;
    font-size: 12px;
    color: white;
}

JavaScript

$(document).ready(function(){
    $('.slider').slick({
        centerMode: true,
        centerPadding: '60px',
        dots: false,
        infinite: true,
        speed: 300,
        slidesToShow: 4,
        slidesToScroll: 1,
        arrows: true
     });
});

演示： http://jsfiddle.net/schwany23/j39j568c/

Answer 1

在您的小提琴中，您忘记将 slick-theme.css 文件添加为外部资源。如果您想遵循作者的默认样式，则需要该文件。或者，如果您想要自己的样式，请继续制作您自己的样式，并使其成为您自己的主题 .css 文件或其他文件。

<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick-theme.css"/>

还有这个用于可见性的CSS，

.slick-prev:before, .slick-next:before{
    color:red;
}

更新后的 jsFiddle 可以在这里找到。

代码片段在这里...

$(document).ready(function() {
  $('.slider').slick({
    centerMode: true,
    centerPadding: '60px',
    dots: true,
    /* Just changed this to get the bottom dots navigation */
    infinite: true,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: true
  });
});

body {
        background-color: #fff;
      }
      .slider {
        margin: 60px auto;
        width: 500px;
      }
      div {
        height: 100%;
      }
      p {
        text-align: center;
        font-size: 12px;
        color: white;
      }
      /* added the following to give the background color of the arrows as red for visibility, the default which can be found in the slick-theme.css was white */
      .slick-prev:before,
      .slick-next:before {
        color: red;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<link href="http://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>

<div class="slider">
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg" height="100" width="100" />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg" height="100" width="100" />
  </div>
</div>

希望这有帮助

Answer 2

如果箭头位于白色背景上，只需在 css 中为它们添加颜色，如下所示：

.slick-prev:before, .slick-next:before {
  color: #09529b !important;
}

Answer 3

如果您已包含 slick-theme.css 但仍然遇到问题，那是因为主题预计位于子文件夹中（例如 /theme/slick-theme.css），但默认下载将 slick-theme.css 放在与 ajax-loader.gif 和 fonts 文件夹相同的文件夹，它们都是从主题引用的。

解决方案： 将 slick-theme.css 文件放在子文件夹中或编辑 css，以便它不再尝试在父文件夹中查找。您可能还需要按照 Sai

的建议更改箭头的颜色

Answer 4

当您没有足够的幻灯片时，可能会发现自己处于特定逻辑的情况。

例如：如果您有 4 张幻灯片，设置为 Infinite，slidesToShow: 4，您将永远不会看到导航箭头。

只需再添加一张幻灯片即可显示导航。

Answer 5

在

slick-theme.css

中的箭头已签名为

-25px

，所以请注意更改它 因为您已经为整页给出了

margin=0px

。

Answer 6

默认字体大小设置为 0，因此您只需将字体大小设置为 13px，并且应该在悬停时出现