带有两个猫头鹰轮播(宽度)的移动问题

Question

我找不到我特定问题的问题或主题。

此问题发生在移动设备 (991px( 宽上，并且仅影响第二个猫头鹰轮播。

我试图删除第一个，第二个开始工作。我也切换了两个，没有结果(最后一个总是"销毁"。 https://www.dropbox.com/s/f5b6y79sux2v2zq/Screenshot%202019-04-23%2009.24.56.png?dl=0(第一个：正确的轮播 - 第二个：已销毁(

下面的代码来自我们的 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' => '='
                            ],
                        ],
                        videoportalpluginVideo::getDefaultVideoFilters()
                    )
            ];
            break;
        case 'new':
            // only filter out default filters
            $_args = [
                'meta_query' => videoportalpluginVideo::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 videoportalpluginVideo( 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。

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