Home Forums WoodMart support forum Information Box Carousel more than 2 images on mobile

Information Box Carousel more than 2 images on mobile

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #81896

    John
    Participant

    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.
    #81923

    Artem Temos
    Keymaster

    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

    #81930

    John
    Participant

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

    #81934

    John
    Participant

    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

    #81943

    Artem Temos
    Keymaster

    Yes, this function works for all info boxes globally.

    #81945

    John
    Participant

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

    #81946

    Artem Temos
    Keymaster

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

    #81948

    John
    Participant

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

    #81949

    Artem Temos
    Keymaster

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

    #81950

    John
    Participant

    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

    #81954

    Artem Temos
    Keymaster

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

    John
    Participant

    nevermind i understood what you said 😀 let me check

    #81962

    John
    Participant

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

    #81977

    Artem Temos
    Keymaster

    You are welcome 🙂

Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘Information Box Carousel more than 2 images on mobile’ is closed to new replies.