Home Forums WoodMart support forum OWL Carousel Reply To: OWL Carousel

#37464

Artem Temos
Keymaster

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

function woodmart_owl_carousel_init( $atts = array() ) {
		extract( shortcode_atts( woodmart_get_owl_atts(), $atts ) );

		$func_name = 'carousel_' . $carousel_id;
		$func_name = function() use( $carousel_id, $slides_per_view, $autoplay, $autoheight, $speed, $hide_pagination_control, $hide_prev_next_buttons, $scroll_per_page, $wrap, $dragEndSpeed  ) {
			
			$items = woodmart_get_owl_items_numbers( $slides_per_view );
			ob_start();
			?>

				jQuery( document ).ready(function( $ ) {

	                var owl = $("#<?php echo esc_js( $carousel_id ); ?> .owl-carousel");

					$( window ).bind( "vc_js", function() {
						owl.trigger('refresh.owl.carousel');
					} );

					var options = {
	            		rtl: $('body').hasClass('rtl'),
			            items: <?php echo esc_js( $items['desktop'] ); ?>, 
			            responsive: {
			            	979: {
			            		items: <?php echo esc_js( $items['desktop'] ); ?>
			            	},
			            	768: {
			            		items: <?php echo esc_js( $items['desktop_small'] ); ?>
			            	},
			            	479: {
			            		items: <?php echo esc_js( $items['tablet'] ); ?>
			            	},
			            	0: {
			            		items: <?php echo esc_js( $items['mobile'] ); ?>
			            	}
			            },
						center: true,
			            autoplay: <?php echo ($autoplay == 'yes') ? 'true' : 'false'; ?>,
						autoplayHoverPause: <?php echo apply_filters( 'woodmart_autoplay_hover_pause', 'true' ); ?>,	
			            autoplayTimeout: <?php echo esc_js( $speed ); ?>,
			            dots: <?php echo ($hide_pagination_control == 'yes') ? 'false' : 'true'; ?>,
			            nav: <?php echo ($hide_prev_next_buttons == 'yes') ? 'false' : 'true'; ?>,
			            autoheight: <?php echo ($autoheight == 'yes') ? 'false' : 'true'; ?>,
			            slideBy:  <?php echo ($scroll_per_page == 'yes') ? '\'page\'' : 1; ?>,
			            navText:false,
			            loop: true,
						dragEndSpeed: <?php echo esc_js( $dragEndSpeed ); ?>,
			            onRefreshed: function() {
			            	$(window).resize();
			            }
					};

	                owl.owlCarousel(options);

				});
			<?php
			return ob_get_clean();
		};

		if( $carousel_js_inline == 'yes' ) {
			echo '<script type="text/javascript">' . $func_name() . '</script>';
		} else {
    		wp_add_inline_script( 'woodmart-theme', $func_name(), 'after' );
		}
	}