Nivo Slider просто не работает должным образом - PullRequest
Новая
       29

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

2 голосов
/ 02 апреля 2011

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

Таблица стилей в заголовке: 

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

div 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, но я полностью потерян. Любая помощь будет прекрасна!

Ответы [ 2 ]

7 голосов
/ 02 апреля 2011

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

<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>
2 голосов
/ 26 июля 2012

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

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

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

...