我希望Slit Slider停在最后一张幻灯片上

Question

Hi guys I am using Slit slider http://tympanus.net/codrops/2012/10/24/slit-slider-revised but cannot get it to stop on the last slide. I am fairly new to JQuery but I have tried every method I could find and all of them seem to break the slider in some shape or form. you can see what I am trying to do here http://anamariadan.com/

Any help would be greatly appreciated

_navigate : function( dir, pos ) {

if( this.isAnimating || this.slidesCount < 2 ) {

    return false;

}

this.isAnimating = true;

var self = this,
    $currentSlide = this.$slides.eq( this.current );

// if position is passed
if( pos !== undefined ) {

    this.current = pos;

}
// if not check the boundaries
else if( dir === 'next' ) {

    this.current = this.current < this.slidesCount - 1 ? ++this.current : 0;

}
else if( dir === 'prev' ) {

    this.current = this.current > 0 ? --this.current : this.slidesCount - 1;

}

this.options.onBeforeChange( $currentSlide, this.current );

// next slide to be shown
var $nextSlide = this.$slides.eq( this.current ),
    // the slide we want to cut and animate
    $movingSlide = ( dir === 'next' ) ? $currentSlide : $nextSlide,

    // the following are the data attrs set for each slide
    configData = $movingSlide.data(),
    config = {};

config.orientation = configData.orientation || 'horizontal',
config.slice1angle = configData.slice1Rotation || 0,
config.slice1scale = configData.slice1Scale || 1,
config.slice2angle = configData.slice2Rotation || 0,
config.slice2scale = configData.slice2Scale || 1;

this._validateValues( config );

var cssStyle = config.orientation === 'horizontal' ? {
        marginTop : -this.size.height / 2
    } : {
        marginLeft : -this.size.width / 2
    },
    // default slide's slices style
    resetStyle = {
        'transform' : 'translate(0%,0%) rotate(0deg) scale(1)',
        opacity : 1 
    },
    // slice1 style
    slice1Style = config.orientation === 'horizontal' ? {
        'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
    } : {
        'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')'
    },
    // slice2 style
    slice2Style = config.orientation === 'horizontal' ? {
        'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
    } : {
        'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')'
    };

if( this.options.optOpacity ) {

    slice1Style.opacity = 0;
    slice2Style.opacity = 0;

}

// we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next"
// or going "prev" according to the direction.
// the idea is to make it more interesting by giving some animations to the respective slide's elements
//( dir === 'next' ) ? $nextSlide.addClass( 'sl-trans-elems' ) : $currentSlide.addClass( 'sl-trans-back-elems' );

$currentSlide.removeClass( 'sl-trans-elems' );

var transitionProp = {
    'transition' : 'all ' + this.options.speed + 'ms ease-in-out'
};

// add the 2 slices and animate them
$movingSlide.css( 'z-index', this.slidesCount )
            .find( 'div.sl-content-wrapper' )
            .wrap( $( '<div class="sl-content-slice" />' ).css( transitionProp ) )
            .parent()
            .cond(
                dir === 'prev', 
                function() {

                    var slice = this;
                    this.css( slice1Style );
                    setTimeout( function() {

                        slice.css( resetStyle );

                    }, 50 );

                }, 
                function() {

                    var slice = this;
                    setTimeout( function() {

                        slice.css( slice1Style );

                    }, 50 );

                }
            )
            .clone()
            .appendTo( $movingSlide )
            .cond(
                dir === 'prev', 
                function() {

                    var slice = this;
                    this.css( slice2Style );
                    setTimeout( function() {

                        $currentSlide.addClass( 'sl-trans-back-elems' );

                        if( self.support ) {

                            slice.css( resetStyle ).on( self.transEndEventName, function() {

                                self._onEndNavigate( slice, $currentSlide, dir );

                            } );

                        }
                        else {

                            self._onEndNavigate( slice, $currentSlide, dir );

                        }

                    }, 50 );

                },
                function() {

                    var slice = this;
                    setTimeout( function() {

                        $nextSlide.addClass( 'sl-trans-elems' );

                        if( self.support ) {

                            slice.css( slice2Style ).on( self.transEndEventName, function() {

                                self._onEndNavigate( slice, $currentSlide, dir );

                            } );

                        }
                        else {

                            self._onEndNavigate( slice, $currentSlide, dir );

                        }

                    }, 50 );

                }
            )
            .find( 'div.sl-content-wrapper' )
            .css( cssStyle );

$nextSlide.show();

}

Answer 1

Once I understood how all these various sliders worked I just started writing my OWN code for them.... essentially they usually take an array, loop through them, repeating over and over... in a case like this you want to do two things (based on my experience)...

1.) start by getting the LENGTH of the array (to know how many items your dealing with)

2.) detect when you've reached the LAST element then stop the loop / repeat

without seeing your code its hard to say exactly but this gives you a direction to head in at least in terms of figuring out what to modify. Good luck.