Слайдер изображения не появляется

Я попытался создать слайдер изображения после этого руководства http://www.youtube.com/watch?v=5_P3Auq-U8c. У меня не было никакого успеха, и я изо всех сил стараюсь думать о причине, почему слайдер не будет работать. Пропустив код несколько раз, я не вижу ошибок.

Это первое из главы веб-страницы.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/imageslider.js"></script>

Далее приведен код, который можно найти в imagelider.js:

function Slider() {
$(".slider #1").show("fade", 500);
$(".slider #1").delay(5500).hide("slide", {direction:"left"}, 500);

var sc = $(".slider img").size();
var count = 2;

setInterval(function(){
    $(".slider #" + count).show("slide",{direction:"right"}, 500);
    $(".slider #" + count).delay(5500).hide("slide", {direction:"left"}, 500);

    if(count == sc){
        count = 1;
    }else{
        count = count + 1;
    }
},6500);    
}

В основной части страницы у меня есть следующее:

<div class="slider">
        <img src="images/image1.jpg" alt="image1" border="0">
        <img src="images/image2.jpg" alt="image2" border="0">
        <img src="images/image3.png" alt="image3" border="0">
        <img src="images/image4.jpg" alt="image4" border="0">
         </div>

Ответственность css довольно проста:

.slider{
width:425px;
height:175px;
/*overflow:hidden;*/
margin:30px auto;
background-image:url('../images/loader.gif');
background-repeat:no-repeat;
background-position:center;
}

.slider img{
width: 425px;
height:175px;
display:none;
}

Любое руководство здесь было бы превосходным, действительно царапающим мою голову этим!