Question

大家好我正在使用Slit滑块http://tympanus.net/codrops/2012/10/24/slit-slider-revised，但无法让它停在最后一张幻灯片上。我对JQuery相当新，但我已经尝试了我能找到的所有方法，并且它们似乎都以某种形状或形式打破了滑块。你可以看到我在这里尝试做什么http://anamariadan.com/

非常感谢任何帮助

_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

一旦我理解了所有这些不同的滑块是如何工作的，我就开始为它们编写我的OWN代码....实质上它们通常采用数组，循环遍历它们，一遍又一遍地重复...在这样的情况下你想要做两件事（根据我的经验）......

1。）首先获取数组的LENGTH（知道你处理的项目数量）

2。）检测您何时到达LAST元素然后停止循环/重复

没有看到你的代码很难准确说明，但这给你一个方向，至少在弄清楚要修改什么方面。祝你好运。

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

1 个答案: