Home Forums WoodMart – Premium Template Carousel content

This topic contains 3 replies, has 2 voices, and was last updated by Elise Noromit Elise Noromit 1 month, 4 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #244739
    Fredcasas
    Fredcasas
    Customer

    Hi Team,

    I have an info-box-carousel whith images (all the same size) and the number displayed of those images change as the device change following this code :

    “owl-carousel info-box-carousel owl-items-lg-6 owl-items-md-4 owl-items-sm-3 owl-items-xs-2 owl-loaded owl-drag”

    Here we have:

    Desktop = 6 images,
    Table landscape = 4 images,
    Tablet = 3 images,
    Mobile = 2 images.

    I would like to change those numbers in order to display 3, maybe 4 on mobile because for now 2 images appear to big on mobile.

    How doing this please.

    Have a nice day.
    Fred

    Private Content Hidden
    #244820

    Hello,

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

    Best Regards

    #244945
    Fredcasas
    Fredcasas
    Customer

    Hi Elise,
    Thanks a lot for your answer.
    I copy and paste the code in “code snipet” plugin but it don’t work, sorry about that.
    I put a copy of the page.
    Thanks in advance for your answer.
    Have a nice day.
    Fred

    Attachments:
    You must be logged in to view attached files.
    #245128

    Hello,

    Please install and activate the child theme, insert the code into functions.php file.

    Best Regards

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

You must be logged in to reply to this topic.