Customize OWL carousel behaviour

Hi,

I would like to ask you for help about two OWL carousel issues. One of them is, how to customize carousel behaviour, resp. how to use OWL carousel’s API options in WoodMart?

Here is an official list of options https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html and I would like to use them. Adding it simply into Theme Settings > Custom JS > Global Custom JS doesn’t work. For testing purposes I have pasted there from the official website mentioned above this simple piece of code:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
})

No result. Then I have read your support forum and tried adding a snippet into functions.php file, what was suggested somewhere in topics in the past. For clarification, I added this piece of code at the end of functions.php file:

if( ! function_exists( 'woodmart_get_owl_atts' ) ) {

	$message = "function exec";
	echo "<script type='text/javascript'>alert('$message');</script>";
	
	function woodmart_get_owl_atts() {
		return array(
			'speed' => '2000',
			'autoplay' => 'yes',
		);
	}
}

I have also added an alert test, but it never started. It seems, the condition won’t perform as true and skip the body values. How could I affect OWL carousel by adding or changing values?

—————–

For my second issue, how to affect OWL carousels by swipe strength on mobile phones? Please let me explain it. Now, it doesn’t matter how strong or long you swipe through the phone’s display by your finger, it will move a constant number of items (product images in the carousel). If the constant value is set e.g. to 2, it will move only 2 items per carousel’s swipe.

But if I swipe stronger (longer), I need to move more items, e.g. for strong swipe move 5 items, not default 2 ones. I could do that by enabling Theme Settings > Performance > JS > set ON “Disable OWL Carousel script on mobile devices”. Now I can get desired behavior on phones.

The problem is, this setting affects all carousels. I would need to target it only for some ones. Let’s say, I have two carousels. One of them would have set this setting Theme Settings > Performance > JS > set ON “Disable OWL Carousel script on mobile devices” for carousel fluid behaviour and the second one would have default OWL carousel behaviour, it means it doesn’t take care about finger swipe strength. Could you please help me, how to do it?

Make this option Theme Settings > Performance > JS > set ON “Disable OWL Carousel script on mobile devices” not global, but local only for chosen carousels.

Best Regards

Hello,

1. Try to add the following PHP code snippet to the child theme functions.php file to do this

function woodmart_get_owl_items_numbers( $slides_per_view, $post_type = false, $custom_sizes = false ) {
		$items = array(
			'desktop' => $slides_per_view,
			'tablet' => 4,
			'tablet_landscape' => 3,
			'mobile' => 2,
		);
		if ( $post_type == 'product' ) {
			$items['mobile'] = woodmart_get_opt( 'products_columns_mobile' );
		}
		return $items;
	}

and it will work globally for all carousels.

2. Sorry, but there are no options for particular carousels. It works globally only.

Kind Regards

Hi,

Thanks for your reply. Please could I ask you what is going if I set Disable OWL Carousel script on mobile devices to ON? I have noticed, that disable-owl-mobile class is added to carousels. I have tried add that class to certain carousel to disable OWL carousel, but it seems only adding that class isn’t enough. Therefore I would like to inspect what is going if I Disable OWL Carousel is ON.

Also I would like to ask you to share with me file path where to find code for Disable OWL Carousel. Unfortunately, my client wants to disable only some carousels for fluid movement (not globally), because brand logos have to be auto-play movable and only product carousels should be OWL disabled.

Best Regards

Hello,

This option works for mobile devices and you can’t enable it with CSS class for a particular carousel only, unfortunately.

There is no one place where this option is applied. It depends on the element. You can find all WPBakery elements in the folder woodmart/inc/shortcodes/

Kind Regards

[Author]

Posts