Problem is with the sub category slider in shop for desktop view and per single time 5 sub categories are shown and when you cliclkk on next arrow it just moves one sub category ahead rather than moving 5 ahead and if you would go to customise and click on next in the sub category slider it moves 5 ahead, please help with a css code or something that i can fix this issue so that in shop it can move 5 ahaead rather than 1 https://www.veed.io/view/e4c5f64b-94f6-4cc1-bffa-29f31650fee2/showcase?sharingWidget=true heres the video with the issue….

The page I need help with: https://executiverugs.com/shop

CodePudding user response：

I think, theme developers did a basic mistake here and that's why this kind of behavior is coming.

Let me explain to you what is going wrong here and why you have different behavior in the customizer preview and live preview.

so if you'll check this theme js file https://executiverugs.com/wp-content/themes/funio/js/functions.js and search for slidesToScroll:$element.data("slidestoscroll")

you'll see slidesToScroll has a condition where it checks if data-slidestoscroll is available or not, if available then it takes the value from data-columns and set it to slidesToScroll if data-slidestoscroll is not available then it will set value as 1

So if You'll check your page source and check the data-slidestoscroll in div with class woocommerce-product-subcategories you'll see data-slidestoscroll is missing but data-columns="5" is available. but developers are checking for data-slidestoscroll should exist then they will set the value from data-columns, so the condition is failing and slidesToScroll is getting value 1

Why Customizer has 5 slidesToScroll?

In the slick slider, the responsive option breakpoint: 1441 is defined, which defines the max-width:1441, and applies certain rules. so for that breakpoint data-columns1440 or data-columns value is conditionally being applied in your case data-columns is being used since it's available on your page source.

So when you view the page in the customizer preview, the customizer sidebar on left takes some space so the page viewports are less than 1441px and in that case, the responsive breakpoint rule is taking over.

What is the solution?

1. You should contact the theme author/developers and raise an issue about it. so that they can review and provide a solution/fix in the next release.
2. If you know how to edit files using FTP then you need to edit this file /wp-content/themes/funio/js/functions.js but take a file backup first. then search for slidesToScroll:$element.data("slidestoscroll") then replace it with slidesToScroll:$element.data("columns") and save and upload the changes.