Mobile Issue with two owl-carousels (width)


Ask A Question





Login To post a question

I couldn’t find the question or a topic to my specific problem.

The problem occurs on mobile (991px) wide and affects only the second owl-carousel.

I’ve tried to delete the first one and the second one started working. I have also switches both, with no result (last one is always “destroyed”. https://www.dropbox.com/s/f5b6y79sux2v2zq/Screenshot%202019-04-23%2009.24.56.png?dl=0 (First: Correct carousel – Second: Destroyed)

The Code below is out of our php file, which generated the code for the frontend.

function gstaad_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' => '='
                            ],
                        ],
                        gstaadpluginVideo::getDefaultVideoFilters()
                    )

            ];

            break;

        case 'new':

            // only filter out default filters
            $_args = [
                'meta_query' => gstaadpluginVideo::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 gstaadpluginVideo( 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;
}

I can give more details if needed. Let me know!

Thanks in advance,
Sascha

For more info please click herehttps://stackoverflow.com/q/55806295



Have a question or need a custom quote?
info@smartinfocare.com