Information Box Carousel more than 2 images on mobile

Hello there,
I would like to show on mobile more than 2 images per carousel and the space between them to be reduced.
I have posted a 2 screenshoots below with what i’m trying to achieve and how it actually looks.
Hope you understand. I’ve tried using a function code from other request from forum but without luck.
All the best 🙂

Attachments:

You must be logged in to view attached files.

Hi,

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

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;
		$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' );

Regards

Hello there,
I’ve added the code but nothing has changed.
Still 2 blocks on mobile vers
https://imgur.com/a/P5mFWOl

sorry it works, cached issue 😀 all the best 😀

but it broke other slider carousel 🙁
Anything can be done regarding this ?
before=> https://imgur.com/a/CkWbN0h
now => https://imgur.com/a/DXr1T7r

Yes, this function works for all info boxes globally.

Pff so i can’t do something specific only on one carousel ?
I would like only on one to show 4 columns on mobile.

Sorry, but there is no such options for that element. This function works globally.

I understand but as you can see it broke other carousel…
Any alternative to show 4 bubbles on mobile – like carousel ?

Sorry, but there are no other carousels for our info boxes.

I’ve tried to delete
‘desktop’ => 6,
‘tablet_landscape’ => 5,
‘tablet’ => 5,
from the code above so the function will apply only on mobile devices but without luck…
it apply to desktop version also

Try to add extra CSS class to that element custom_sizes and replace with this code

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' );

nevermind i understood what you said 😀 let me check

Flawless, amazing and nice idea with custom class 😀
Now it’s perfect. Thanks amazing support once again.
All the best 😀

You are welcome 🙂

[Author]

Posts