Question

我正在使用Lemmon Juice slider为我的网站获取支持宽度可变的滑动元素的轮播。我能够使用JSFiddle中列出的以下代码实现滑块。

我需要让活动滑块居中，下一个和上一个滑块堆叠在活动滑块的右侧和左侧。通过一些参考，我能够将活动滑块置于JS文件中的一些代码更改中心。但不幸的是，自动播放功能和下一个滑块按钮停止使用JSFiddle-2中所述的更改。

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

}

请帮助我纠正这个问题。任何能帮助解决这个问题的人都会非常感激。非常感谢提前...

Answer 1

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

o在jsfiddle中查看yuur控制台以查看错误并纠正错误。

在调用滑块的功能之前，请确保插件已正确加载。

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

由于

无法将活动滑块与旋转木马对中

1 个答案: