Nivo Slider просто не работает должным образом

Итак, это моя первая попытка с Nivo Slider. У меня ползунок застрял на фото номер 4, вообще не скользит. Я почти совсем не понимаю, как вызвать пулевую навигацию внизу. Это мой код;

Таблица стилей в HEAD:

<link href="nivo-slider.css" rel="stylesheet" type="text/css" />

Раздел Nivo Slider на странице:

<div id="nivo_slider">
     <div id="slider" class="nivoSlider">
           <img src="images/slideshow/1.jpg" width="791" height="254" />
           <img src="images/slideshow/5.jpg" width="791" height="254" />
           <img src="images/slideshow/3.jpg" width="791" height="254" />
           <img src="images/slideshow/2.jpg" width="791" height="254" />
           <img src="images/slideshow/4.jpg" width="791" height="254" />
     </div>
</div>

JavaScript внизу страницы:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
});
</script>

Вот мой CSS:

#nivo_slider { 
        width:791px; 
        height:254px; 
        float:left; 
        margin-left:46px; 
        padding:8px; 
        background:#e6e5e5; 
        border:solid 1px #d1d1d1;
}
#slider { 
        float:left; 
        width:791px; 
        position:relative; 
        background:url(images/loading.gif) no-repeat 50% 50%; 
}
#slider img {
        position:absolute;
        top:0px;
        left:0px;
        display:block;
}
.nivo-controlNav {
        position:absolute;
        left:260px;
        bottom:-42px;
}
.nivo-controlNav a {
        display:block;
        width:22px;
        height:22px;
        background:url(images/bullets.png) no-repeat;
        text-indent:-9999px;
        border:0;
        margin-right:3px;
        float:left;
}
.nivo-controlNav a.active {
        background-position:0 -22px;
}

Я снова и снова просматривал демонстрации и страницу поддержки от Dev7, но я полностью потерялся. Любая помощь будет замечательной!


javascript slider image slideshow nivo-slider
person talkingD0G    schedule 02.04.2011    source источник

Ответы (2)


arrow_upward
7
arrow_downward

У вас синтаксическая ошибка должна быть

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next' // Next directionNav text
     });
});
</script>
person SavoryBytes    schedule 02.04.2011
comment
@talkingD0G также вам следует избавиться от случайной запятой после значения самой последней вещи в этом объекте инициализации (nextText: «Далее»), потому что, если вы этого не сделаете, IE взбесится. - person Pointy; 02.04.2011
comment
@Пойнти, спасибо. Я это увидел и исправил. Теперь он работает отлично. :) - person talkingD0G; 03.04.2011
comment
этот подход к управлению NavThumbsReplace: '_thumb.jpg' ужасен, есть способ использовать с префиксом? что-то вроде thumb_imagename.jpg вместо imagename_thumb.jpg - person Daniel Faria; 06.07.2014

arrow_upward
2
arrow_downward

Я думаю, вы забыли поместить этот код после div Nivo Slider на странице:

<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
</script>

Это загружает его

person Paddy    schedule 26.07.2012