Information box carousel- mobile view

Hello,
we are using information box carousel feature on our website
We are trying to change the number of information boxes (circles) on the mobile view and make them smaller.
Currently, they are showing 2 slides per view, we tried to resize them and to make them 4 instead of two but it’s not working. the setting where we can change the number of slides is only available for desktop view.

Attachments:

You must be logged in to view attached files.

Hello,

Unfortunately, it is not possible to change the number of items on the carousel. Such an option is provided for the grid only.

If you have any questions please feel free to contact us.

Best Regards

Hi,

You can create a custom JS file with the following to allow 4 for mobile;

$(".info-box-carousel").owlCarousel({
            responsive:{
                1025: {
                    items: 3
                },
                769 : {
                    items: 2
                },
                577 : {
                    items: 2
                },
                0   : {
                    items: 4
                }
            }
        });

Just change the item number to reflect the viewpoint?

Hello,

We have 4 breakpoints for responsiveness: desktop, tablet landscape, tablet, mobile.

Here is the code, it will change all the infobox carousels items’ numbers per row, you just need to specify the number for each breakpoint.

add_filter('woodmart_info_box_shortcode_custom_sizes',
   function() {
      return array(
         'desktop'          => 6,
         'tablet_landscape' => 4,
         'tablet'           => 3,
         'mobile'           => 1,
      );
   }
);

Unfortunately, it is not possible to set different items number in a row for each infobox carousel individually. The code can change all carouses.

Alternatively, you can create a separate carousel for each breakpoint.

Best Regards

[Author]

Posts