Owl carousel slider shortcode in WordPress for Showing Posts or custom Posts

1.       Download owl-carousel from  http://owlgraphic.com/owlcarousel/

2.       Collect files from zip folder

·         AjaxLoader.gif

·         grabbing.png

·         owl.carousel.css

·         owl.carousel.min.js

·         owl.transitions.css

3.        Create A folder in your theme (Our folder name is “include”)

4.       Put this 5 files in your folder

5.       Then go your function.php file and imported the files

Exemple:

/* Enqueue Boothstrap scripts and styles. */

function reg_scripts() {

         /*owl-carousel*/

 wp_register_script( 'owl-carousel-script', get_template_directory_uri() . '/ include /owl-carousel/owl.carousel.min.js', array(), '', true );

 wp_register_style( 'owl-carousel-style', get_template_directory_uri() . '/ include /owl-carousel/owl.carousel.css' );

 wp_register_style( 'owl-transitions-style', get_template_directory_uri() . ' include /owl-carousel/owl.transitions.css' );

       

         /*ENQUEUE STYLE*/

         wp_enqueue_style( 'owl-carousel-style' );

         wp_enqueue_style( 'owl-transitions-style' );

       

         /*ENQUEUE SCRIPT*/

         wp_enqueue_script( 'owl-carousel-script' );     

        }

        add_action('wp_enqueue_scripts', 'reg_scripts');

Active owl-carousel-

1.       Call a new js files like custom-ready.js and put this file in your js folder

2.       Then go to your function.php file and include the file

Exemple

function reg_scripts() {

                 wp_register_script( 'custom-ready', get_template_directory_uri() . '/js/custom-ready.js', array(), '', true );

                               

/*ENQUEUE SCRIPT*/

                 wp_enqueue_script( 'custom-ready' );

}

3.       Active slider with ready document

    jQuery(document).ready(function() {                               

                jQuery(".owl-carousel").owlCarousel({

                                autoPlay: 3000, //Set AutoPlay to 3 seconds

                                items : 4,

                                navigation : true, // Show next and prev buttons

                });                          

}

Create Short code for owlCaroussel

1.       Create a shortcodes.php file inside inc/shortcodes folder

2.       Again go to your function.php file and imported the file

Exemple

include get_template_directory() . '/inc/shortcodes/shortcodes.php';

3.       Then put the below link inside your shortcodes.php file.

//Sellproperty Property Carousel

function sellproperty_property_carousel(){

                $sellpropertyProperty= '<div id="owl-slider" class="owl-carousel-property">';

                $efs_query= "post_type=property&posts_per_page=-1";

                query_posts($efs_query);

                if (have_posts()) : while (have_posts()) : the_post();

                                global $post;

                                $thumb= get_the_post_thumbnail( $post->ID, 'property-image' );         

                                $sellpropertyProperty.='

                               

                                <div class="item">

                                                <div class="item_thumb">'.$thumb.'</div>

                                                <div class="sp_thumbTitle text-center">

                                                                <a href="'. get_permalink() . '">'. get_the_title () .'</a>

                                                                

                                                </div>

                                </div>';

                endwhile; endif; wp_reset_query();

                $sellpropertyProperty.= '</div>';

                return $sellpropertyProperty;

}

/**add the shortcode for the slider- for use in editor**/

function sellproperty_insert_property($atts, $content=null){

                $sellpropertyProperty= sellproperty_property_carousel();

                return $sellpropertyProperty;

}

add_shortcode('sellproperty_property', 'sellproperty_insert_property');

Finally we create an owl carousel shortcode

[sellproperty_property]