1
在将其集成到我的其他代码之前，我在空白的html页面上自己测试了浮动轮播。它工作完美，箭头在那里。我将我的测试代码复制并粘贴到已存在代码的页面中。旋转木马仍按预期工作，但切换图像的箭头现在已消失。我不确定发生了什么或如何解决。浮动旋转木马上的箭头没有出现
这是我的代码：
$(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>
您可以拨动您的代码或提供网站？为了找到这种错误，最好使用浏览器提供的开发者工具并尝试...... – Rea
下面是一个小提琴的链接：https://jsfiddle.net/ellecrook/a9g1bum6/我从来没有用过小提琴之前，所以我不知道我在那里做什么。我尝试添加外部资源，但我不确定是否在那里做了些什么。 – Elle
您是否找到了解决方案？如果你仍然在寻找答案，并且你不能让Fiddle工作，只需将完整的代码上传到服务器上，那么我可以使用开发者模式来检查代码。 – Rea