Arrows on Slick Carousel not appearing
Question
I did a test of the slick carousel on it's own in an empty html page before integrating it into the rest of my code. It worked perfectly and the arrows were there. I copy and pasted my test code into a page with code that already existed. The carousel still worked as intended, but the arrows to toggle the images have now disappeared. I'm not sure what happened or how to fix it.
This is my code:
$(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 answers
solution1
0 2015-10-20 17:25:29
You 2 time Add jquery-1.11.0.min.js
one more thing first load jquery library file
Demo link https://jsfiddle.net/a9g1bum6/1/
solution2
0 ACCPTED 2015-10-24 00:25:35
I figured it out. I had the carousel set to a white background and the arrows/dots are colored white by default hence the "disappearance," so I just have to go in and restyle the colors....
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.