Question

大家好，我当前的产品轮播当前设置为每行3个项目（移动设备为2个），但我想将其范围缩小为每行1个项目。

如何才能对此进行编码以便每行获得1个项目？

当前产品轮播：

所需产品轮播：

这是我的代码：

     * Product carousel

 */

$( '.sober-product-carousel' ).each( function () {
    var $carousel = $( this ),
        columns = parseInt( $carousel.data( 'columns' ), 10 ),
        autoplay = parseInt( $carousel.data( 'autoplay' ), 10 ),
        loop = $carousel.data( 'loop' );
    autoplay = autoplay === 0 ? false : autoplay;
    $carousel.find( 'ul.products' ).addClass( 'owl-carousel' ).owlCarousel( {
        items          : columns,
        autoplay       : !!autoplay,
        autoplayTimeout: autoplay,
        loop           : loop === 'yes',
        pagination     : true,
        navigation     : false,
        slideSpeed     : 300,
        paginationSpeed: 500,
        rtl            : !!( soberData && soberData.isRTL && soberData.isRTL === '1' ),
        responsive     : {
            0:{
                items:1
            },
            360:{
                items:2
            },
            767:{
                items:columns
            }
        }
    } );
} );

Answer 1

如果您发布标记，我可能会给出更清晰的答案。如果您只想要一件商品，看来您可以简化很多工作

$( '.sober-product-carousel' ).each( function () {

    var $carousel = $( this ),

        columns = parseInt( $carousel.data( 'columns' ), 10 ),

        autoplay = parseInt( $carousel.data( 'autoplay' ), 10 ),

        loop = $carousel.data( 'loop' );



    autoplay = autoplay === 0 ? false : autoplay;



    $carousel.find( 'ul.products' ).addClass( 'owl-carousel' ).owlCarousel( {

        items          : 1,

        autoplay       : !!autoplay,

        autoplayTimeout: autoplay,

        loop           : loop === 'yes',

        pagination     : true,

        navigation     : false,

        slideSpeed     : 300,

        paginationSpeed: 500,

        rtl            : !!( soberData && soberData.isRTL && soberData.isRTL === '1' ),

    } );

} );

编辑：我还要补充一点，您正在使用Owl Carousel插件： https://owlcarousel2.github.io/OwlCarousel2/

EDIT2：如果需要响应：

responsive     : {

            0:{

                items:1

            }
        }

如何将此产品转盘更改为每项1行而不是每项3行？

1 个答案: