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

Posted

技术标签:

【中文标题】光滑的滑块下一个箭头不显示【英文标题】:Slick Slider Next Arrows not showing 【发布时间】:2015-05-13 22:42:21 【问题描述】:

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

这是我的代码:

html

  <div class="slider">
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/8013LN_Cat.jpg"  >
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg"  >
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG"  >
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg"  >
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg"  >
      </div>
      <div>
        <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg"  >
      </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/

【问题讨论】:

【参考方案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;

The updted jsFiddle can be found here.

这里是代码 sn-p...

$(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"   />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/HiddenTailor.9074B.jpg"   />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1600ETY.JPG"   />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/VIPERPRO81.jpg"   />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/garment_bag.jpg"   />
  </div>
  <div>
    <img src="http://www.onguardapparel.com/images/products/thumb/1077.jpg"   />
  </div>
</div>

希望对你有帮助

【讨论】:

非常感谢您的帮助! @SchwanPark - 很高兴能提供帮助。现在,如果这是您问题的可接受解决方案,请标记它(绿色复选标记),以便将来有人遇到同样的问题,这可能会派上用场 我包含了 slick-theme.css,但默认箭头颜色是白色,在白色背景上实际上是不可见的。 @Sai 的 css 将它们涂成红色,很明显它们就在那里。 在您的 HTML 中,您永远不应该直接包含来自 github 的页面。搜索 CDN。例如:cdnjs.com/libraries/slick-carousel .slick-prev:before, .slick-next:before color:red; 这对我有用...谢谢你【参考方案2】:

如果箭头在白色背景上,只需在您的 css 中为它们添加颜色,如下所示:

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

【讨论】:

【参考方案3】:

如果您已包含 slick-theme.css 并且仍然遇到问题,那是因为该主题需要位于子文件夹中(例如 /theme/slick-theme.css),但默认下载会将 slick-theme.css在与 ajax-loader.gif 和 fonts 文件夹相同的文件夹中,它们都从主题中引用。

解决方案: 将 slick-theme.css 文件放在子文件夹中或编辑 css 使其不再尝试在父文件夹中查找。您可能还需要按照Sai 的建议更改箭头的颜色

【讨论】:

【参考方案4】:

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

例如:如果您有 4 个 Slides,Infinite on true 和 slidesToShow: 4,您将永远看不到导航箭头。

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

【讨论】:

【参考方案5】:

slick-theme.css 中,箭头已签名-25px,因此请注意更改 因为您已经为整个页面提供了margin=0px

【讨论】:

【参考方案6】:

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

【讨论】:

正如目前所写,您的答案尚不清楚。请edit 添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于光滑的滑块下一个箭头不显示的主要内容,如果未能解决你的问题,请参考以下文章

光滑的滑块箭头在响应模式下表现得像幻灯片

如何在光滑的滑块中创建自定义箭头以在悬停时更改图像?

光滑的滑块拇指没有显示

光滑的滑块:在显示的图像之间添加空间

我如何在光滑的滑块中只显示三张幻灯片?

调整窗口大小时,光滑的滑块没有响应