Skipping first slide in Nivoslider

Question

I'm using Nivoslider Version 3.1 on a small WordPress site I am building.

I was wondering if there is a way I can tell Nivoslider to always ignore Slide 1.

So if my HTML is:

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

So, the Slider will always start at 2.jpg & will never show 1.jpg . Is this possible?

Here is the Nivoslider Demo for reference.

It's an odd workaround, I agree, but my current implementation of the Slider doesn't work when I use a foreach loop to populate the slider. It does populate it, but the slider gets stuck on "loading".

For the record, here's my current implementation of it:

<div id="slider" class="slider nivoSlider">
                <?php
                    $id = get_the_ID();
                    $custom_fields = get_post_custom($id);
                    $my_custom_field = $custom_fields['img1'];
                    foreach ( $my_custom_field as $key => $value ) {
                        echo '<img src="/wp-content/themes/boilerplate/images/csg-50c8a86d6bfc0.png" height="350" width="620">';
                    }
                ?>
                </div>

Many thanks for any help that can be given with this.

Answer 1

Depending on the particular version of nivoslider you have downloaded/ particular edits you may have made to it:

Look for slide-show.js

and edit the line

startSlide: 0, // Set starting Slide (0 index)

To skip it on the first loop

And...(I'm going out on a limb here)

In jquery.nivo.slider edit the function...

$.fn.nivoSlider = function(options) {

    //Defaults are below
    var settings = $.extend({}, $.fn.nivoSlider.defaults, options);

    return this.each(function() {
        //Useful variables. Play carefully.
        var vars = {
            currentSlide: 0,
            currentImage: '',
            totalSlides: 0,
            randAnim: '',
            running: false,
            paused: false,
            stop:false
        };

Such that you hardcode the absolute number of slides and that it should restart the loop before reaching 1.jpg.

Not certain if this will work - hardcoding such elements like this would generally not be a good idea; you would also want to remove user controls to prevent manual navigation to that slide.

It does beg the question: why would you want to include a slide that you never want to be displayed?

Answer 2

above didn't work for me.. what did work for me (to skip the 4th image) was this:

   $('#slider').nivoSlider({
       prevText: '',
       nextText: '',
       controlNav: false,
       beforeChange: function ()
       {
           var current = $('#slider').data('nivo:vars').currentSlide;
           //if the currentIndex = 2, the next will be 3, which is the fourth image, 
           //which is the one I wanted to skip
           if(current == 2)
           {
               $('#slider').data('nivo:vars').currentSlide = 3;
           }
       }
   });

for the first image you should probably say if current == * last-index * { ... currentSlide = 0 }