CODEWITHSUNDEEP
javascriptjquerynivo-slider
michaelmcgurk
michaelmcgurk

Reputation: 6509

Skip First or Last Slide in NivoSlider - jQuery Slideshow

Does anyone know how I can skip the first or last slide in my NivoSlider 3.1 installation?

Background: I add my images to the slideshow dynamically using WordPress custom fields and due to a strange quirk, it won't display the slideshow unless I have at least 1 image already in there.

Is it possible to tell NivoSlider to ignore the FIRST or LAST slide?

So, my markup could be:

<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>

So, for instance here, it would skip Wall-E or Finding Nemo altogether, not even displaying it.

Many thanks for any help with this - totally racking my brains for a few days now :-)

Upvotes: 0

Views: 942

Answers (1)

Jamie Hutber
Jamie Hutber

Reputation: 28074

Should help you out a bit.

$(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);
});

EDIT

    $(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
    });
});

Upvotes: 1

Related Questions