Slick Carousel 上的箭头未出现

Question

在将它集成到我的其余代码中之前，我在空的 html 页面中单独测试了 slick carousel。它工作得很好，箭头就在那里。我将我的测试代码复制并粘贴到包含已存在代码的页面中。轮播仍然按预期工作，但切换图像的箭头现在消失了。我不确定发生了什么或如何解决它。

这是我的代码：

$(document).ready(function() {
  $('.slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    autoplay: true,
    autoplaySpeed: 5000,
  });
});

#header {
  height: 40px;
  position: relative;
  margin: 80px auto 0;
}
#header ul {
  margin: 0 auto;
  width: 800px;
  padding: 0;
  list-style: none;
}
#header ul li {
  float: left;
  width: 97px;
}
#header ul li:nth-of-type(4) {
  margin-left: 217px;
}
#header ul li a {
  text-transform: lowercase;
  text-decoration: none;
  display: block;
  text-align: center;
  padding: 12px 0 0 0;
  height: 28px;
  color: #000;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
#header ul li a:hover {
  color: #c4c4c4;
}
.logo {
  position: absolute;
  left: 50%;
  margin: -60px 0 0 -124px;
}
@media screen and (max-width: 800px) {
  .logo {
    bottom: 100%;
  }
  #header ul li:nth-of-type(4) {
    margin-left: 0;
  }
  #header ul {
    width: 600px;
    position: relative;
  }
}
ul.sub-menu {
  display: none;
  position: absolute;
  top: 30;
  left: 0;
  width: auto!important;
  overflow: hidden;
  padding: 0 1em;
  z-index: 2;
  background: white;
}
.sub-menu li {
  display: block;
  float: none!important;
}
.more {
  position: relative;
}
.more:hover .sub-menu {
  display: inline-block;
}
#filler {
  height: 100px;
}
.slider {
  width: 750px;
  margin: 20px auto;
  background: white;
  text-align: center;
}
.slider div img {
  height: 500px;
  margin: auto;
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
  <title>Whatever Photography</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="Content/bootstrap.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="slick/slick.css" />
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
  <link href="style.css" rel="stylesheet" />
</head>

<body>

  <div id="header">
    <a class="logo">
      <img src="imgs/logo.jpg" alt="Whatever Photography" height="140" width="230" />
    </a>
    <ul>
      <li><a href="">About</a>
      </li>
      <li class="more">
        <a href="">Galleries <span class="caret"></span></a>
        <ul class="sub-menu">
          <li><a href="">Portraits</a>
          </li>
          <li><a href="">Landscapes</a>
          </li>
          <li><a href="">Personal</a>
          </li>
        </ul>
      </li>
      <li><a href="">Blog</a>
      </li>
      <li><a href="">Info/Rates</a>
      </li>
      <li><a href="">Prints</a>
      </li>
      <li><a href="">Contact</a>
      </li>
    </ul>
  </div>
  <div class="container">
    <div class="col-md-12" id="filler">
    </div>

    <div class="col-md-12">
      <div class="slider">
        <div>
          <img src="imgs/slider01.jpg" />
        </div>
        <div>
          <img src="imgs/slider02.jpg" />
        </div>
        <div>
          <img src="imgs/slider03.jpg" />
        </div>
        <div>
          <img src="imgs/slider04.jpg" />
        </div>
        <div>
          <img src="imgs/slider05.jpg" />
        </div>
        <div>
          <img src="imgs/slider06.jpg" />
        </div>
        <div>
          <img src="imgs/slider07.jpg" />
        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>
  <script src="scripts.js"></script>
</body>

</html>

Answer 1

你2次添加jquery-1.11.0.min.js

还有一件事首先加载jquery库文件

演示 link https://jsfiddle.net/a9g1bum6/1/

Answer 2

我想通了。我将旋转木马设置为白色背景，并且 arrows/dots 默认为白色，因此 "disappearance," 所以我只需要进入并重新设计颜色....

Slick Carousel 上的箭头未出现

Arrows on Slick Carousel not appearing

javascript

html

css

slick.js