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