Не удается заставить Nivo Slider работать

Кажется, я не могу заставить работать слайдер nivo. Я строго следовал инструкциям на их сайте.

Вот мой index.html.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(window).load(function() {
                $('#slider').nivoSlider();
            });
        </script>
    </head>
    <body>
        <div class="slider-wrapper">
            <div id="slider" class="nivoSlider">
                <img src="images/nemo.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="#htmlcaption" /></a>
                <img src="images/toystory.jpg" alt="" title="This is an example of a caption" />
                <img src="images/walle.jpg" alt="" />
            </div>
        </div>
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
        </div>
    </body>
</html>

Вот мой style.css.

.nivoSlider {
    position:relative;
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}

Я не могу понять, почему это не работает. Я также пробовал ссылаться на последнюю версию jQuery.


html jquery nivo-slider
person psycho    schedule 17.04.2013    source источник
comment
вам нужно будет уточнить, что «это не работает» ...   -  person Pedro del Sol    schedule 17.04.2013
comment
Я уверен, что ваши источники неправильно связаны. Используя ваш html и указывая <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> и <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> в нужное место, он отлично работает.   -  person gearsdigital    schedule 17.04.2013
comment
все ваши файлы в одной папке?   -  person mukund    schedule 17.04.2013
comment
@psycho, у меня это хорошо работает. Если вы используете firefox, проверьте ошибку в консоли, нажав Ctrl + Shift + J   -  person arjuncc    schedule 17.04.2013
comment
Chrome сообщает мне, что не удалось загрузить файл ресурсов: //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js и файл: //ajax.googleapis.com/ajax/libs/jqueryui /1.9.1/jquery-ui.min.js и file: //localhost/Users/anchorman1986/Desktop/Slider%20Tutorial/jquery.nivo.slide‌ r.pack.js   -  person psycho    schedule 17.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

когда вы используете jquery и не понимаете, почему он не работает, используйте инструменты веб-разработчика.

если вы используете плагин firebug или хром, используйте инструмент проверенных элементов. что они делают, они сообщат вам об ошибке. таким образом вы сможете понять, что происходит, и задать более точные вопросы.

person Erdem Ece    schedule 17.04.2013
comment
Chrome сообщает мне, что не удалось загрузить файл ресурсов: //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js и файл: //ajax.googleapis.com/ajax/libs/jqueryui /1.9.1/jquery-ui.min.js и файл: //localhost/Users/anchorman1986/Desktop/Slider%20Tutorial/jquery.nivo.slider.pack.js - person psycho; 17.04.2013
comment
измените file: // на http: // тогда, пожалуйста, и дайте мне знать, если это сработает, толстый ответ. Благодарю. - person Erdem Ece; 17.04.2013