javascript - 带有两个 Owl Carousel 的移动问题(宽度)

Question

我找不到针对我的具体问题的问题或主题。

该问题发生在移动设备 (991px) 宽度上，并且仅影响第二个 owl-carousel。

我尝试删除第一个，第二个开始工作。我也切换了两者，但没有结果(最后一个总是“被破坏”。https://www.dropbox.com/s/f5b6y79sux2v2zq/Screenshot%202019-04-23%2009.24.56.png?dl=0(第一个:正确的轮播 - 第二个:被破坏)

下面的代码来 self 们的 php 文件，该文件生成了前端代码。

function videoportal_mainpage_carousel( $category ) {

    // allowed feeds
    $categories = [
        'new',
        'highlights'
    ];

    if( !in_array( $category, $categories ) ) {
        return;
    }

    $args = [
        'post_type' => 'video',
        'suppress_filters' => 0
    ];


    switch( $category ) {
        case 'highlights':

            // extend category with order by likes and filtered by "highlight" enabled
            $_args = [
                'meta_key'   => 'likes',
                'orderby'    => 'meta_value_num',
                'order'      => 'DESC',
                'meta_query' =>

                    /**
                     * Merge the default video filters with the highlight filter
                     */
                    array_merge(
                        [
                            [
                                'key'   => 'highlight',
                                'value' => '1',
                                'compare' => '='
                            ],
                        ],
                        videoportal\plugin\Video::getDefaultVideoFilters()
                    )

            ];

            break;

        case 'new':

            // only filter out default filters
            $_args = [
                'meta_query' => videoportal\plugin\Video::getDefaultVideoFilters()
            ];

            break;

    }

    $args = array_merge( $args, $_args );


    $query = new WP_Query( $args );

    // loop the videos

    if( !$query->have_posts() ) {
        return;
    }

    $html = '<ul class="owl-carousel carousel-fw fw-carousel" 
                    id="%s-carousel" 
                    data-columns="6" 
                    data-autoplay="yes" 
                    data-loop="yes" 
                    data-padding="0" 
                    data-center-align="yes" 
                    data-autoplay-timeout="5000" 
                    data-pagination="no" 
                    data-arrows="yes" 
                    data-items-desktop="2" 
                    data-items-desktop-small="1" 
                    data-items-tablet="1" 
                    data-items-mobile="3">';

    $html = sprintf( $html, $category );

    while( $query->have_posts() ) {

        $query->the_post();

        // set video object
        $video = new \videoportal\plugin\Video( get_the_ID() );

        // get image
        $image = $video->getThumbnail();

        // get description
        $description = $video->getDescription( 'short' );
        if( strlen( $description ) > 0 ) {
            $description = sprintf(
                '<span>%s</span>',
                $video->getDescription( 'short' )
            );
        }else {
            $description = '<div class="no-description"></div>';
        }

        // get list of categories without links as the container itself is already linked
        $categories = $video->getCategoryList( false );

        // set up item
        $item =
            '<li class="item match-height">
                <!-- start news items -->
                <a href="%1$s" title="%2$s" class="news-items">
                    <!-- start news media -->
                    <span class="news-media">
                        <span class="media-box">
                            <img src="%3$s" alt="%2$s">
                            <span class="ico-play"><i class="fa fa-play-circle-o"></i></span>
                        </span>
                        <span class="news-caption">
                            <span>%4$s</span>
                            <strong>%2$s</strong>
                        </span>
                    </span>
                    <!-- end news media -->
                    <!-- start news content -->
                    <span class="news-content">
                        %5$s
                    </span>
                    <!-- end news content -->
                </a>
                <!-- end news items -->
            </li>';

        $item = sprintf(
            $item,
            get_permalink(),
            get_the_title(),
            $image,
            $categories,
            $description
        );

        $html .= $item;
    }

    $html .= '</ul>';

    wp_reset_postdata();

    return $html;
}

如果需要，我可以提供更多详细信息。让我知道!

提前致谢， 萨沙

Answer 1

这听起来像是版本 2.2.1 中的已知错误，请尝试最新版本 Owl Carousel v2.3.4。

我认为这会解决您的问题。