Information Box Carousel Mobile

This topic has 12 replies, 2 voices, and was last updated 2 years, 7 months ago by Luke Nielsen.

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

Author

Posts
June 10, 2022 at 5:23 am #382338

Plain2013
Participant

I found this function php snipped in your post to change carousel slides in mobile device:

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
}

but it is not working..i’m using wpbakery page builder

June 10, 2022 at 10:55 am #382376

Luke Nielsen
Keymaster

Hello,

It’s not working because the code works only with the “Elementor” plugin. First of all, describe your problem, or rather what you need so then we will try to help you.

I await your response.

Kind Regards

June 10, 2022 at 2:45 pm #382420

Plain2013
Participant

I want to change the information box carousel slides for mobile devices.. 3 items in a row for a mobile devices. for desktop it is okay.

June 10, 2022 at 4:43 pm #382454
Luke Nielsen
Keymaster
Hello,

With the help of the below code, you can change the number of items on the mobile view, just set the appropriate value for the “mobile” attribute. Paste it to the functions.php file in your child theme.

https://monosnap.com/file/5leAxUEvy8aBlnym8E7Sf9I645Ofm0
```
add_filter('woodmart_info_box_shortcode_custom_sizes',
   function() {
      return array(
         'desktop'          => 6,
         'tablet_landscape' => 4,
         'tablet'           => 3,
         'mobile'           => 1,
      );
   }
);
```
Also, this code will affect all infoboxes on your website.

In case you need any additional help, I’d be more than happy to assist you

Kind Regards
June 10, 2022 at 4:53 pm #382458

Plain2013
Participant

But I just want to change one. I don’t want to change all infoboxes carousel. please help me

June 10, 2022 at 4:56 pm #382459

Plain2013
Participant

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

I tried this code too .. but it doesn’t work either.

June 10, 2022 at 5:06 pm #382460

Luke Nielsen
Keymaster

Hello,

Unfortunately, there is no other way to change the number of info box items except that I added above.

Please, let me know if there is anything else I can help and have a good day!

Kind Regards

June 10, 2022 at 5:08 pm #382461

Plain2013
Participant

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
}

can you modify this code for wpbakery page builder.. i think it is working for a single carousel

June 10, 2022 at 5:09 pm #382462

Plain2013
Participant

https://xtemos.com/forums/topic/information-box-carousel-more-than-2-images-on-mobile/

also check this… please help because it is very important

June 10, 2022 at 5:12 pm #382463

Plain2013
Participant

i think we can target specific element with the help of class or id.

June 10, 2022 at 5:28 pm #382469

Luke Nielsen
Keymaster

Hello,

The solution from this (https://xtemos.com/forums/topic/information-box-carousel-more-than-2-images-on-mobile/) topic is outdated.

In the next update, we will add functionality to adjust items on the mobile view. Our next theme update will be released in a few weeks.

Kind Regards

June 10, 2022 at 5:49 pm #382473

Plain2013
Participant

okay. thank you

June 13, 2022 at 9:01 am #382715

Luke Nielsen
Keymaster

Hello,

You are welcome!

Always remember that you can reach out to us with any questions you may have.

We wish you a splendid day!

Kind Regards
Author

Posts

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

The topic ‘Information Box Carousel Mobile’ is closed to new replies.

Information Box Carousel Mobile

Create your WordPress website.