Here is my HTML, I've starred the more relevant parts of the code, also made a jsfiddle version that demonstrates the problem using numbers instead of images. http://jsfiddle.net/j4r69wv0/1/.
<html lang = "en">
<head>
**<link rel="stylesheet" type="text/css" href="slick/slick.css"/>**
<link rel = "stylesheet" type= "text/css" href = "foundation.css">
<link rel = "stylesheet" type= "text/css" href = "style.css">
<meta charset = "UTF-8">
<title> Blank </title>
</head>
<body>
**<script src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>**
<header>
<hgroup>
<h1>Blank </h1>
<h3> Blank <br> Blank <br>
<p id="date"></p>
<script>
document.getElementById("date").innerHTML = Date();
</script>
</h3>
</hgroup>
<br>
<nav id = "MenuBar">
<ul>
<li> <a href = "Welcome Page.html"> Resume </a> </li>
<li> <a href = "#"> Media </a> </li>
<li> <a href = "#"> Projects </a> </li>
<li> <a href = "#"> Blog </a> </li>
</ul>
</nav>
</header>
**<div class = 'slider-for'>
<div><img src="test.jpg" alt="test" height="250" width="250"></div>
<div><img src="test.jpg" alt="test" height="250" width="250"></div>
<div><img src="test.jpg" alt="test" height="250" width="250"></div>
</div>
<div class='slider-nav'>
<div><img src="test.jpg" alt="test" height="250" width="250"></div>
<div><img src="test.jpg" alt="test" height="250" width="250"></div>
<div><img src="test.jpg" alt="test" height="250" width="250"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
focusOnSelect: true
});
}) ;
</script>**
<footer>
<small>Thanks</small>
</footer>
</body>
</html>
I've tried to modify my jsfiddle to use the css that a previous post used to resolve, but it does not help. I'm also hosting jquery and slick locally, so changing my file//: paths to http:// did not make a difference.
I'm using jquery 1.11.2 which i've placed in the same folder as this html doc. In the code I reference jquery 1.11.0, because if I ref 1.11.2, i just get three images horizontally.
I've put the slick folder containing slick.js,slick.css in the same folder as my html doc. I'm still lost as to where I've gone wrong, so any help would be awesome!
Aucun commentaire:
Enregistrer un commentaire