I've been working through a YouTube tutorial on creating a JQuery image slider, but I’ve hit a snag in my code and can’t seem to figure out the issue.
My goal is to have the images span the full width of the screen, similar to how Apple features them on their website. apple website
I attempted adjusting everything to 100% width, but unfortunately, this caused my slider to break.
$(function() {
//variables
var width = $('img').width();
var animationSpeed = 500;
var pause = 4000;
var currentSlide = 1;
var interval;
var $slider = $("#slider");
var $slideContainer = $slider.find(".slides");
var $slides = $slideContainer.find(".slide");
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({
"margin-left": "-=" + width
}, animationSpeed, function() {
currentSlide++;
if (currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function stopSlider() {
clearInterval(interval);
}
$slider.on('mouseenter', stopSlider).on('mouseleave', startSlider);
startSlider();
});@import url(https://fonts.googleapis.com/css?family=Pacifico);
body {
margin: 0px;
background: #e6e6e6;
color: white;
}
header {
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #e6e6e6;
padding: 1px;
position: fixed;
z-index: 999;
font-size: 100%;
text-align: center;
}
nav {
margin: 1;
display: inline;
white-space: nowrap;
}
#webSiteName {
font-size: 1em;
display: inline;
padding: 40px;
font-family: 'Pacifico', cursive;
}
.pages {
font-size: 0.7em;
color: white;
list-style-type: none;
display: inline-block;
padding: 10px 40px;
text-decoration: none;
font-family: arial;
}
.pages:hover {
color: #a6a6a6;
cursor: pointer;
}
#slider {
width: 720px;
height: 400px;
overflow: hidden;
}
#slider .slides {
display: block;
width: 6000px;
height: 400px;
margin: 0;
padding: 0;
}
#slider .slide {
float: left;
list-style-type: none;
width: 720px;
height: 400px;
}
img {
width: 720px;
height: 400px;
}
/*# sourceMappingURL=stylesheet.css.map */<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Example Website</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<nav>
<a href='' id='webSiteName' class='pages'>Example</a>
<a href='' class='pages'>Page</a>
<a href='' class='pages'>Page</a>
<a href='' class='pages'>Page</a>
<a href='' class='pages'>Page</a>
</nav>
</header>
<div id="slider">
<ul class="slides">
<li class="slide">
<img src="images/slider1.png" />
</li>
<li class="slide">
<img src="images/slider2.jpg" />
</li>
<li class="slide">
<img src="images/slider3.jpg" />
</li>
<li class="slide">
<img src="images/slider1.png" />
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>