Javascript 无法使用旋转木马将活动滑块居中

我使用我的网站来获得旋转木马，它支持可变宽度的滑动元素。我能够用下面的代码实现滑块

我需要使活动滑块居中，下一个和上一个滑块堆叠在活动滑块的右侧和左侧。通过一些参考，我能够在JS文件中对活动滑块进行一些代码更改，使其居中。但不幸的是，自动播放功能和“下一个滑块”按钮停止了工作，更改内容如中所述

及

请帮我把这个修好。任何能帮助解决这个问题的人都将不胜感激。

---

提前非常感谢…

刚刚检查了您的fiddele： 我所观察到的是，它无法加载插件，这导致您的自动滚动功能和下一个幻灯片按钮停止工作

或在JSFIDLE中提供YOUR控制台，以查看错误并纠正错误

在调用滑块函数之前，请确保插件已正确加载

我建议您搜索owlcarousel并在您的项目中使用它，因为它提供了很大的灵活性和易处理性

---

谢谢

Hi kshitij，谢谢你的回复。如果插件没有加载，那么它如何在第一个JSFIDLE中工作。。我创建的函数与nextSlide按钮有一些冲突。如果下一个滑动按钮工作，自动播放功能也将工作。因为自动播放功能只是触发下一个滑动按钮。我尝试了Owlcarousel插件。这是一个很棒的插件。因为我需要活动滑块居中，所以这个插件不提供这样做的选项。而且它不支持不同宽度的图像。谢谢你的建议。

function slideTo( e, $slider, x, i, t ){

    $slider.items.filter( 'li:eq(' + i + ')' ).addClass( 'active' ).siblings( '.active' ).removeClass( 'active' );


    // This function is added to center the carousel.
    if( $slider.options.center ) {
        var currentElement = $( $slider.items[ i ] );
        $slider.options.offset = Math.floor( ( $( window ).width() - currentElement.width() ) / 2 );
        console.log( 'set offset to ', $slider.options.offset );
    }

    if ( typeof t == 'undefined' ){
        t = 'fast';
    }
    if ( t ){

        //$slider.animate({ 'scrollLeft' : x }, t, function(){   - changed to below
        $slider.animate({ 'scrollLeft' : x  - $slider.options.offset }, t, function(){ 
            checkInfinite( $slider );
        });
    } else {
        var time = 0;
        // $slider.scrollLeft( x ); changed to below
        $slider.scrollLeft( x - $slider.options.offset );
        checkInfinite( $slider );
    }

    //if ( typeof $slider.options.slide == 'function' ) $slider.options.slide( e, i, time );

}
function checkInfinite( $slider ){

    var $active = $slider.items.filter( '.active' );
    if ( $active.hasClass( '-before' ) ){

        var i = $active.prevAll().size();
        $active.removeClass( 'active' );
        $active = $slider.items.filter( ':not(.-before):eq(' + i + ')' ).addClass( 'active' );
        // $slider.scrollLeft( $slider.scrollLeft() + $active.position().left); changed to below
        $slider.scrollLeft( $slider.scrollLeft() + $active.position().left - $slider.options.offset );
    } else if ( $active.hasClass( '-after' ) ){

        var i = $active.prevAll( '.-after' ).size();
        $active.removeClass( 'active' );
        $active = $slider.items.filter( ':not(.-before):eq(' + i + ')' ).addClass( 'active' );
        //$slider.scrollLeft( $slider.scrollLeft() + $active.position().left ); changed to below
        $slider.scrollLeft( $slider.scrollLeft() + $active.position().left - $slider.options.offset );

    }

}

$.fn.lemmonSlider.defaults = {

    'items'       : '> *',
    'loop'        : true,
    'slideToLast' : false,
    'slider'      : '> *:first',
    // since 0.2
    'infinite'    : true,
    // additional codes
    'center':      true,
    'offset':      0

}