光滑輪播上的箭頭未出現
[英]Arrows on Slick Carousel not appearing
問題描述
在將其集成到我的其余代碼中之前，我在一個空的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>
2 個解決方案
解決方案1
0 2015-10-20 17:25:29
解決方案2
0 已采納 2015-10-24 00:25:35
我想到了。 我將輪播設置為白色背景，默認情況下箭頭/點的顏色為白色，因此“消失”，所以我只需要重新設置顏色即可。...
將 Slick 輪播水平箭頭更改為帶有字體真棒箭頭的向上和向下箭頭
[英]Change Slick carousel horizontal arrows to Up and & down arrows with font-awesome arrows
如何根據圓滑的輪播寬度有條件地添加下一個和上一個箭頭？
[英]How to conditionally add next and prev arrows based on slick carousel width?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.