Below, you’ll find a detailed guide on how to add the OWL Carousel – WordPress Owl Carousel Slider Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the OWL Carousel – WordPress Owl Carousel Slider Plugin shortcode not to show or not to work correctly.
Before starting, here is an overview of the OWL Carousel – WordPress Owl Carousel Slider Plugin and the shortcodes it provides:
OWL Carousel – WordPress Owl Carousel Slider
"OWL Carousel – WordPress Owl Carousel Slider is a dynamic plugin designed to easily create stunning, responsive carousel sliders on your WordPress site. With its user-friendly interface, customizing sliders is a breeze."
Included Shortcodes:
- [lgx-carousel]
OWL Carousel [lgx-carousel] Shortcode
The lgx-carousel shortcode is a dynamic tool that customizes the Owl Carousel plugin in WordPress. It allows users to set parameters such as order, limit, color, and margin, among others. The shortcode also handles responsive settings for different devices, and styling options for background color, opacity, and image. It provides a flexible way to adjust the carousel’s appearance and behavior.
Shortcode: [lgx-carousel]
Parameters
Here is a list of all possible lgx-carousel shortcode parameters and attributes:
order– Determines the order of the carousel itemsorderby– Sets the parameter to order the carousel items bylimit– Sets the maximum number of carousel items to displaycat– Specifies the category of carousel items to displaycolor– Defines the text color of the carousel itemsbgcolor– Sets the background color of the carousel itemsbgopacity– Specifies the opacity of the background colorbgimage– Sets a background image for the carouselitembg– Enables or disables a background for each carousel itemmargin– Defines the margin between carousel itemslazyload– Enables or disables lazy loading for the carouselloop– Specifies if the carousel should loop back to the startnav– Enables or disables navigation arrows for the carouselautoplay– Enables or disables autoplay for the carouselautoplay_timeout– Sets the delay time between carousel item transitionsadd_active– Enables or disables the addition of an active class to carousel itemshover_pause– Specifies if carousel autoplay should pause on hovervideo– Enables or disables video support for the carouselanimateout– Sets the animation effect when a carousel item exitsanimatein– Sets the animation effect when a carousel item entersdots– Enables or disables pagination dots for the carouselvideoheight– Defines the height of videos in the carouselvideowidth– Defines the width of videos in the carouselsmartspeed– Defines the speed of the smart speed featureslidespeed– Determines the speed of slide transitionspaginationspeed– Sets the speed of pagination transitionsrewindspeed– Determines the speed of rewind transitionsitemlarge– Specifies the number of items to display on large desktopsitemdesk– Specifies the number of items to display on desktopsitemtablet– Specifies the number of items to display on tabletsitemmobile– Specifies the number of items to display on mobile devicesnavlarge– Enables or disables navigation on large desktopsnavdesk– Enables or disables navigation on desktopsnavtablet– Enables or disables navigation on tabletsnavmobile– Enables or disables navigation on mobile devices
Examples and Usage
Basic example – Display a carousel with default settings
[lgx-carousel /]Advanced examples
Display a carousel with a specific category and limit the number of items
[lgx-carousel cat='category-slug' limit=5 /]Customize the carousel’s appearance by changing the background color and item background
[lgx-carousel bgcolor='#f1f1f1' itembg='yes' /]Control the carousel’s behavior by setting autoplay, loop, and navigation options
[lgx-carousel autoplay='no' loop='yes' nav='yes' /]Set specific settings for different devices
[lgx-carousel itemlarge=4 itemdesk=3 itemtablet=2 itemmobile=1 /]PHP Function Code
In case you have difficulties debugging what causing issues with [lgx-carousel] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode('lgx-carousel', array($this, 'lgx_carousel_shortcode_function' ));Shortcode PHP function:
function lgx_carousel_shortcode_function($atts) {
$cats_set = trim($this->settings_api->get_option('lgxowl_settings_cat', 'lgxowl_basic', ''));
$order_set = $this->settings_api->get_option('lgxowl_settings_order', 'lgxowl_basic', 'DESC');
$orderby_set = $this->settings_api->get_option('lgxowl_settings_orderby', 'lgxowl_basic', 'orderby');
$limit_set = trim($this->settings_api->get_option('lgxowl_settings_limit', 'lgxowl_basic', -1));
//Data Attribute
$margin_set = trim($this->settings_api->get_option('lgxowl_settings_margin', 'lgxowl_config', 10));
$loop_set = $this->settings_api->get_option('lgxowl_settings_loop', 'lgxowl_config', 'yes');
$loop_set = ( !empty($loop_set) && !is_null($loop_set) && ($loop_set == 'no') ) ? 'false' : 'true';
$nav_set = $this->settings_api->get_option('lgxowl_settings_nav', 'lgxowl_config', 'yes');
$nav_set = ( !empty($nav_set) && !is_null($nav_set) && ($nav_set == 'no') ) ? 'false' : 'true';
$autoplay_set = trim($this->settings_api->get_option('lgxowl_settings_autoplay', 'lgxowl_config', 'yes'));
$autoplay_set = ( !empty($autoplay_set) && !is_null($autoplay_set) && ($autoplay_set == 'no') ) ? 'false' : 'true';
$lazyload_set = trim($this->settings_api->get_option('lgxowl_settings_lazyload', 'lgxowl_config', 'no'));
$lazyload_set = ( !empty($lazyload_set) && !is_null($lazyload_set) && ($lazyload_set == 'yes') ) ? 'true' : 'false';
$add_active_set = trim($this->settings_api->get_option('lgxowl_settings_active', 'lgxowl_config', 'yes'));
$add_active_set = ( !empty($add_active_set) && !is_null($add_active_set) && ($add_active_set == 'no') ) ? 'false' : 'true';
$video_set = trim($this->settings_api->get_option('lgxowl_settings_video', 'lgxowl_config', 'no'));
$video_set = ( !empty($video_set) && !is_null($video_set) && ($video_set == 'yes') ) ? 'true' : 'false';
$animateout_set = trim($this->settings_api->get_option('lgxowl_settings_animateout', 'lgxowl_config', 'false'));
$animatein_set = trim($this->settings_api->get_option('lgxowl_settings_animatein', 'lgxowl_config', 'false'));
$smartspeed_set = trim($this->settings_api->get_option('lgxowl_settings_smartspeed', 'lgxowl_config', '500'));
$slidespeed_set = trim($this->settings_api->get_option('lgxowl_settings_slidespeed', 'lgxowl_config', '200'));
$paginationspeed_set = trim($this->settings_api->get_option('lgxowl_settings_paginationspeed', 'lgxowl_config', '800'));
$rewindspeed_set = trim($this->settings_api->get_option('lgxowl_settings_rewindspeed', 'lgxowl_config', '1000'));
$autoplay_timeout_set = trim($this->settings_api->get_option('lgxowl_settings_autoplay_timeout', 'lgxowl_config', 500));
$hover_pause_set = trim($this->settings_api->get_option('lgxowl_settings_hover_pause', 'lgxowl_config', 'no'));
$hover_pause_set = ( !empty($hover_pause_set) && !is_null($hover_pause_set) && ($animatein_set == 'yes') ) ? 'true' : 'false';
$dots_set = trim($this->settings_api->get_option('lgxowl_settings_dots', 'lgxowl_config', 'yes'));
$dots_set = ( !empty($dots_set) && !is_null($dots_set) && ($dots_set == 'no') ) ? 'false' : 'true';
$videoheight_set = trim($this->settings_api->get_option('lgxowl_settings_videoheight', 'lgxowl_config', 350));
$videowidth_set = trim($this->settings_api->get_option('lgxowl_settings_videowidth', 'lgxowl_config', ''));
if($videowidth_set == ''){
$videowidth_set = 'false';
}
// Responsive
$item_set_lagedesctop = $this->settings_api->get_option('lgxowl_settings_largedesktop_item', 'lgxowl_responsive', 1);
$nav_set_lagedesctop = $this->settings_api->get_option('lgxowl_settings_desktop_nav', 'lgxowl_responsive', 'yes');
$nav_set_lagedesctop = ( !empty($nav_set_lagedesctop) && !is_null($nav_set_lagedesctop) && ($nav_set_lagedesctop == 'no') ) ? 'false' : 'true';
$item_set_desctop = $this->settings_api->get_option('lgxowl_settings_desktop_item', 'lgxowl_responsive', 1);
$nav_set_desctop = $this->settings_api->get_option('lgxowl_settings_desktop_nav', 'lgxowl_responsive', 'yes');
$nav_set_desctop = ( !empty($nav_set_desctop) && !is_null($nav_set_desctop) && ($nav_set_desctop == 'no') ) ? 'false' : 'true';
$item_set_tablet = $this->settings_api->get_option('lgxowl_settings_tablet_item', 'lgxowl_responsive', 1);
$nav_set_tablet = $this->settings_api->get_option('lgxowl_settings_tablet_nav', 'lgxowl_responsive', 'yes');
$nav_set_tablet = ( !empty($nav_set_tablet) && !is_null($nav_set_tablet) && ($nav_set_tablet == 'no') ) ? 'false' : 'true';
$item_set_mobile = $this->settings_api->get_option('lgxowl_settings_mobile_item', 'lgxowl_responsive', 1);
$nav_set_mobile = $this->settings_api->get_option('lgxowl_settings_mobile_nav', 'lgxowl_responsive', 'yes');
$nav_set_mobile = ( !empty($nav_set_mobile) && !is_null($nav_set_mobile) && ($nav_set_mobile == 'no') ) ? 'false' : 'true';
//Style
$color_set = trim($this->settings_api->get_option('lgxowl_settings_color', 'lgxowl_style', '#333333'));
$bgcolor_set = trim($this->settings_api->get_option('lgxowl_settings_bgcolor', 'lgxowl_style', '#f1f1f1'));
$bgopacity_set = trim($this->settings_api->get_option('lgxowl_settings_bgopacity', 'lgxowl_style', 0.85));
$bgimage_set = trim($this->settings_api->get_option('lgxowl_settings_bgimage', 'lgxowl_style', ''));
$itembg_set = trim($this->settings_api->get_option('lgxowl_settings_itembg', 'lgxowl_style', 'no'));
/*$option_arr = $this->option_arr;
extract($option_arr);*/
$att_values = shortcode_atts(array(
'order' => $order_set,
'orderby' => $orderby_set,
'limit' => $limit_set,
'cat' => $cats_set,
'color' => $color_set,
'bgcolor' => $bgcolor_set,
'bgopacity' => $bgopacity_set,
'bgimage' => $bgimage_set,
'itembg' => $itembg_set,
'margin' => $margin_set,
'lazyload' => $lazyload_set,
'loop' => $loop_set,
'nav' => $nav_set,
'autoplay' => $autoplay_set,
'autoplay_timeout' => $autoplay_timeout_set,
'add_active' => $add_active_set,
'hover_pause' => $hover_pause_set,
'video' => $video_set,
'animateout' => $animateout_set,
'animatein' => $animatein_set,
'dots' => $dots_set,
'videoheight' => $videoheight_set,
'videowidth' => $videowidth_set,
'smartspeed' => $smartspeed_set,
'slidespeed' => $slidespeed_set,
'paginationspeed' => $paginationspeed_set,
'rewindspeed' => $rewindspeed_set,
'itemlarge' => $item_set_lagedesctop,
'itemdesk' => $item_set_desctop,
'itemtablet' => $item_set_tablet,
'itemmobile' => $item_set_mobile,
'navlarge' => $nav_set_lagedesctop,
'navdesk' => $nav_set_desctop,
'navtablet' => $nav_set_tablet,
'navmobile' => $nav_set_mobile,
), $atts, 'lgx-carousel');
$output = '';
// Output view override from active theme ans plugin
if ( file_exists(get_template_directory() . '/logichunt/plugin-public.php')){
require_once get_template_directory() . '/logichunt/plugin-public.php';
$method_name =trim(str_replace("-","_",$this->plugin_name).'_views');
if ( class_exists( 'LogicHuntPluginExtendedPublic' ) ) {
$themeViews = new LogicHuntPluginExtendedPublic();
if( method_exists($themeViews, $method_name)) {
$output = $themeViews->$method_name($att_values, $atts);
}else {
$output = $this->lgx_output_function($att_values, $atts);
}
}
} else{
$output = $this->lgx_output_function($att_values, $atts);
}
return $output;
}
Code file location:
lgx-owl-carousel/lgx-owl-carousel/public/class-lgx-owl-carousel-public.phpConclusion
Now that you’ve learned how to embed the OWL Carousel – WordPress Owl Carousel Slider Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply