I'm having trouble making jquery work. Here is head of my HTML:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><linkrel="script" type="text/javascript" href="script.js">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
And here's my javascript:
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 580;
var slides = $(".movie");
var numberOfSlides = slides.length;
var slideShowInterval;
var slideshowSpeed = 3000;
slideShowInterval = setInterval(changePosition, slideshowSpeed);
slides.wrapAll("<div id="slidesHolder"></div>");
slides.css({"float": "left"});
$("#slidesHolder").css("width", slideWidth * numberOfSlides);
function changePosition() {
if (currentPosition == numberOfSlides) {
currentPosition = 1;
}
else {
currentPosition += 1;
}
moveSlide();
}
function moveSlide() {
$("#slideHolder").animate({"marginLeft": slideWidth * (-currentPosition)});
}
});
The strange thing is that I've used JQuery in exactly the same way on other sites before, and it worked perfectly. I've already tested the alert , tried using the downloaded library instead of the Google CDN, I already tried to change the order of <script> in head of HTML, and I've already tried the same problem in other forums, but without success of getting help.