Untitled

<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>
<link rel="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">

$(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)});
    }

});