Question

当我尝试实现此Slick滑块时，我仅得到一个类似图像的数字列表： https://codepen.io/AntFArm/pen/JNEgJE

html代码：

<div class="main">
  <div class="slider slider-for">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
  </div>
  <div class="slider slider-nav">
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
  </div>
  <div class="action">
    <a href="#" data-slide="3">go to slide 3</a>
    <a href="#" data-slide="4">go to slide 4</a>
    <a href="#" data-slide="5">go to slide 5</a>
  </div>
</div>

js代码：

 $('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav'
 });
 $('.slider-nav').slick({
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: true,
   focusOnSelect: true
 });

 $('a[data-slide]').click(function(e) {
   e.preventDefault();
   var slideno = $(this).data('slide');
   $('.slider-nav').slick('slickGoTo', slideno - 1);
 });

我明白了：

我的代码与codepen.io网站上的代码完全相同。我也没有任何错误。我究竟做错了什么？提前谢谢。

我的脚本包括：

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>
<script>
    $('.slider-for').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: false,
        fade: true,
        asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        asNavFor: '.slider-for',
        dots: true,
        focusOnSelect: true
    });

    $('a[data-slide]').click(function(e) {
        e.preventDefault();
        var slideno = $(this).data('slide');
        $('.slider-nav').slick('slickGoTo', slideno - 1);
    });
</script>

我将必要的文件加载到头部：

Answer 1

如所见，JavaScript已运行。看到您的代码不起作用，我必须假设您要在<head>中或至少在定义<div class="main">的位置之前添加脚本。呈现引擎尚未呈现您相关的滑块元素，因此它找不到它们并且什么也没做。

要么将脚本打包成onload（或$(function() {/* your code here */})），要么将脚本放在页面底部

Answer 2

似乎没有应用光滑的默认样式，请仔细检查您是否拥有它们，并且它们的路径正确。

<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>

Answer 3

在您的Codepen中，不会加载平滑代码，因此您将获得div的默认DOM显示（一个在另一个下面）。加载脚本一定有问题。

光滑的滑块仅显示文本

3 个答案: