posts from multiple post types in one slider

Question

i am creating a carousel using WP Bakery Page Builder which should show posts from two different post types (one is custom). Is there any plugin to get a workaround, or perhaps any suggestion?

Answer 1

Multiple Post type in one slider Shortcode

• Using This Shortcode For Owl Carousel In Your Page And Add Your Custom Post Type In The Arguments of Query

• Put This Code in Your functions.php

add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );

function my_child_enqueue_styles() 
{
        wp_enqueue_style('styleowl','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css');
        wp_enqueue_style('style1','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.min.css');
        wp_enqueue_script('pro-owl','https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.1/owl.carousel.min.js',array( 'jquery' ), '', false);
        wp_enqueue_script('jquery','https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js',false);

}   

add_shortcode('post_slider','custom_slider');

   function custom_slider(){

        $args = array(
            'post_type' => array('post','events'), // add to your multiple post type in the array
            'post_status' => 'publish',
            'posts_per_page' => -1,
        );

        $arr_posts = new WP_Query( $args );

        if ( $arr_posts->have_posts() ) :
            ob_start();  ?>
            <div class='product-carousel'>

               <div class="owl-carousel themes-p" id="product">
                  <?php
                    while ( $arr_posts->have_posts() ) :
                        $arr_posts->the_post();
                        ?>
                        <div class="item list-porduct">
                            <div class="product_image">
                                <a href="<?php the_permalink() ?>">
                                    <?php the_title(); ?>
                                    <?php the_post_thumbnail('medium'); ?>

                                </a>
                            </div>
                        </div>
                        <?php
                    endwhile;
                  ?>
                   </div>
                </div>
                 <?php endif; ?>
                 <style type="text/css">

         .owl-prev {
            width: 15px;
            height: 100px;
            position: absolute;
            top: 0%;
            outline: none;
            transform: translateY(95%);
            margin-left: -20px;
            display: block !important;

        }

        .owl-next {
            outline: none;
            width: 15px;
            height: 100px;
            position: absolute;
            top: 0%;
            transform: translateY(95%);
            right: -20px;
            display: block !important;
        }
        .owl-prev span {
            position: absolute;
            color:red;
            width: 34px;
            height: 36px;
            left:20px;
            font-size: 40px;
            line-height: 32px;
        }
        .owl-next span {
            position: absolute;
            color:red;
            width: 34px;
            height: 36px;
            right:20px;
            font-size: 40px;
            line-height: 32px;
        }

      </style>


      <script type="text/javascript">

            jQuery('#product').owlCarousel({
                    autoplay:true,
                    items: 5,
                    nav: false,
                    loop:true,
                    dots: false,
                    margin:10,
                    mouseDrag: true,
                    responsiveClass: true,
                    responsive: {
                        0:{
                          items: 1
                        },
                        480:{
                          items: 1
                        },
                        769:{
                          items: 2
                        },
                         1024:{
                          items: 4
                        },
                        1440:{
                          items: 4
                        },
                    }
                }); 
      </script><?php}

• Add This [post_slider] shortcode in Your page Builder Text Element