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
