在NivoSlider中跳过第一张或最后一张幻灯片 - jQuery幻灯片

时间:2012-12-14 15:47:33

标签: javascript jquery nivo-slider

是否有人知道我如何跳过 NivoSlider 3.1 安装中的第一个最后幻灯片?

背景:我使用 WordPress 自定义字段动态地将图片添加到幻灯片中,由于strange quirk,除非我,否则它不会显示幻灯片已经有至少1张图片。

是否有可能告诉NivoSlider忽略第一张或最后一张幻灯片?

所以,我的标记可能是:

<div id="slider" class="slider nivoSlider">
<img src="1.jpg" /> <!-- Ignore this ALWAYS -->
<img src="wp-img-1.jpg" />
<img src="another-wp-img-2.jpg" />
<img src="yet-another-wp-img-3.jpg" />
</div>

因此,例如here,它会完全跳过Wall-EFinding Nemo,甚至不会显示它。

非常感谢您对此提供任何帮助 - 现在我的大脑已经绞尽脑汁了几天: - )

1 个答案:

答案 0 :(得分:1)

应该帮到你一点。

$(document).ready(function () {
    //set up vars
    var slider = $('#slider');
    var firstImage = $('#slider img:first');
    var lastImage = $('#slider img:last');

    //Take them out of the gallery
    firstImage.remove();
    lastImage.remove();

    //run photo gallery stuff

    //Now add images back in
    slider.prepend(firstImage);
    slider.append(lastImage);
});

修改

    $(window).load(function() {

//set up vars
var slider = $('#slider');
var firstImage = $('#slider img:first');
var lastImage = $('#slider img:last');

//Take them out of the gallery
firstImage.remove();
lastImage.remove();

    $('.slider').nivoSlider({
        effect: 'slideInLeft', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 1, // Set starting Slide (0 index)    
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: true, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide   
        directionNav:true,
        directionNavHide:false,
        afterLoad: function(){
            //Now add images back in
            slider.prepend(firstImage);
            slider.append(lastImage);
        } // Triggers when slider has loaded
    });
});