Information Box Carousel Mobile Released to this post #81896

Hey guys,

I was unable to answer to this post so I start a new pot.

I found this function php snipped in your post:
function woodmart_shortcode_info_box_carousel( $atts = array(), $content = null ) {
$output = $class = $autoplay = ”;

$parsed_atts = shortcode_atts( array_merge( woodmart_get_owl_atts(), array(
‘slider_spacing’ => 30,
‘dragEndSpeed’ => 600,
‘el_class’ => ”,
) ), $atts );

extract( $parsed_atts );

$class .= ‘ ‘ . $el_class;
$class .= ‘ ‘ . woodmart_owl_items_per_slide( $slides_per_view );

$carousel_id = ‘carousel-‘ . rand(100, 999);

$parsed_atts[‘carousel_id’] = $carousel_id;
if ( $el_class == ‘custom_sizes’ ) {
$parsed_atts[‘custom_sizes’] = array(
‘desktop’ => 6,
‘tablet_landscape’ => 5,
‘tablet’ => 5,
‘mobile’ => 4,
);
}
$owl_atts = woodmart_get_owl_attributes( $parsed_atts );

ob_start(); ?>
<div id=”<?php echo esc_attr( $carousel_id ); ?>” class=”woodmart-carousel-container info-box-carousel-wrapper woodmart-carousel-spacing-<?php echo esc_attr( $slider_spacing ); ?>” <?php echo ( $owl_atts ); ?>>
<div class=”owl-carousel info-box-carousel<?php echo esc_attr( $class ); ?>” >
<?php echo do_shortcode( $content ); ?>
</div>
</div>
<?php
$output = ob_get_contents();
ob_end_clean();

return $output;
}
add_shortcode( ‘woodmart_info_box_carousel’, ‘woodmart_shortcode_info_box_carousel’ );

with the extra class “custom_sizes”

Well for Bakery this worked perfect, but with elementor it is no longer working. I added the extra class to “custom class” of the element.

Could you please offer me a way to make this work for elementor too?

Best regards from Germany,
iRomeK

Hello,

Please show the code you are using.

Best Regards

Hey guys,

well the code I pasted above?

This is the code in function php

function woodmart_shortcode_info_box_carousel( $atts = array(), $content = null ) {
		$output = $class = $autoplay = '';

		$parsed_atts = shortcode_atts( array_merge( woodmart_get_owl_atts(), array(
			'slider_spacing' => 30,
			'dragEndSpeed' => 600,
			'el_class' => '',
		) ), $atts );

		extract( $parsed_atts );

		$class .= ' ' . $el_class;
		$class .= ' ' . woodmart_owl_items_per_slide( $slides_per_view );

		$carousel_id = 'carousel-' . rand(100, 999);

		$parsed_atts['carousel_id'] = $carousel_id;
		if ( $el_class == 'custom_sizes' ) {
			$parsed_atts['custom_sizes'] = array(
				'desktop' => 6,
				'tablet_landscape' => 5,
				'tablet' => 5,
				'mobile' => 4,
			);
		}
		$owl_atts = woodmart_get_owl_attributes( $parsed_atts );
		
		ob_start(); ?>
			<div id="<?php echo esc_attr( $carousel_id ); ?>" class="woodmart-carousel-container info-box-carousel-wrapper woodmart-carousel-spacing-<?php echo esc_attr( $slider_spacing ); ?>" <?php echo ( $owl_atts ); ?>>
				<div class="owl-carousel info-box-carousel<?php echo esc_attr( $class ); ?>" >
					<?php echo do_shortcode( $content ); ?>
				</div>
			</div>
		<?php
		$output = ob_get_contents();
		ob_end_clean();

		return $output;
	}
	add_shortcode( 'woodmart_info_box_carousel', 'woodmart_shortcode_info_box_carousel' );

And this was the CSS class: custom_sizes I added in the widget at elementor.

Best Regards an thank you 🙂

iRomeK

Hello,

Please add this code to the function.php of the child theme:

function woodmart_elementor_infobox_carousel_template( $settings ) {
		$default_settings = [
			'content_repeater'        => array(),
			// Carousel.
			'speed'                   => '5000',
			'slides_per_view'         => [ 'size' => 4 ],
			'slider_spacing'          => 30,
			'wrap'                    => '',
			'autoplay'                => 'no',
			'center_mode'             => 'no',
			'hide_pagination_control' => '',
			'hide_prev_next_buttons'  => '',
			'scroll_per_page'         => 'yes',
			'scroll_carousel_init'    => 'no',
			'custom_sizes'            => apply_filters( 'woodmart_info_box_shortcode_custom_sizes', false ),
		];
		$settings         = wp_parse_args( $settings, $default_settings );
		$carousel_classes = '';
		$wrapper_classes  = '';
		$settings['slides_per_view'] = $settings['slides_per_view']['size'];
		if ( isset( $settings['_css_classes'] ) && 'custom_sizes' === $settings['_css_classes'] ) {
			$settings['custom_sizes'] = array(
				'desktop'          => 6,
				'tablet_landscape' => 5,
				'tablet'           => 5,
				'mobile'           => 4,
			);
		}
		$carousel_classes .= ' ' . woodmart_owl_items_per_slide(
			$settings['slides_per_view'],
			array(),
			false,
			false,
			$settings['custom_sizes']
		);
		if ( 'yes' === $settings['scroll_carousel_init'] ) {
			woodmart_enqueue_js_library( 'waypoints' );
			$wrapper_classes .= ' scroll-init';
		}
		if ( woodmart_get_opt( 'disable_owl_mobile_devices' ) ) {
			$wrapper_classes .= ' disable-owl-mobile';
		}
		$wrapper_classes .= ' wd-carousel-spacing-' . $settings['slider_spacing'];
		woodmart_enqueue_inline_style( 'owl-carousel' );
		?>
		<div class="wd-carousel-container info-box-carousel-wrapper<?php echo esc_attr( $wrapper_classes ); ?>" <?php echo woodmart_get_owl_attributes( $settings ); ?>>
			<div class="owl-carousel info-box-carousel<?php echo esc_attr( $carousel_classes ); ?>">
				<?php foreach ( $settings['content_repeater'] as $index => $infobox ) : ?>
					<?php
					$infobox                    = $infobox + $settings;
					$infobox['wrapper_classes'] = ' elementor-repeater-item-' . $infobox['_id'];
					?>
					<?php woodmart_elementor_infobox_template( $infobox ); ?>
				<?php endforeach; ?>
			</div>
		</div>
		<?php
	}

Best Regards

Hey Guys,

thank you very much. The class now works and in elementor view it counts right. So 4 slides for mobile.

Well at my iPhone 11 Pro I see 4,5 Slides. Even if I change mobile to 3 in the code my iPhone still shows 4,5.

It’s not working as expected but I still like it!

Thank you very much! 🙂

Hello,

Please provide the page URL with the problem.

Best Regards

sure. Here it is 🙂

Well as said, its not a problem. I looks good as I looks but I guess its not what you expect.

Thank you.

Hello,

Do you mean the scrollbar? Please set OFF for Disable OWL Carousel script on mobile devices in the Theme Settings > Performance > JS.

Best Regards

You nailed it! Thank youuuu! 🙂

We are always happy to help you, write to us when you have any difficulties or issues with our theme.

We would be grateful for 5 stars rate on http://themeforest.net/downloads in case you are satisfied with our theme and customer service

Thank you in advance

[Author]

Posts