Client logo slider skips items

[Zedality]

On the demo site there is 5 items, the fourth is a bike logo. On the mobile version only two slides displayed at once. The expected behavior would be to slide automatic to the next slides, displaying all logos. But the fourth bike logo never comes. It slides away very fast.

[ThemeLooks Support Team]

Hi Zedality,

Please provide the live URL and a screenshot to review the issue.

Best regards,
ThemeLooks Support Team

[Zedality]

Hi,

It is clearly visible on the demo site: https://themelooks.org/demo/woolea/

Watch the screen recording:

https://www.dropbox.com/s/kubu5n93lwx9azr/Woolea%20%E2%80%93%20Minimal%20WooCommerce%20WordPress%20Theme%20-%20Google%20Chrome%202020-04-04%2016-28-57.mp4?dl=0

Regards,
Zedality

[ThemeLooks Support Team]

Hi Zedality,

You will able to control it https://prnt.sc/rt9ysy

Best regards,
ThemeLooks Support Team

[Zedality]

Hi,

It’s ok, I can control how many items are displayed. But why does the other elements fly away so fast? Dont tell me, it’s normal. Nobody can see the skipped logos. Please fix it! If I have 4 logos, displaying one on the mobile, I want to see each logo one by one.

[ThemeLooks Support Team]

We have used this plugin https://kenwheeler.github.io/slick/ Please search Autoplay to see how it works.

Best regards,
ThemeLooks Support Team

[Zedality]

I found the problem! Take a look on /wp-content/plugins/woolea-core/assets/js/woolea-frontend.js:232

slidesToScroll: $brandslider.data(‘slick-items’),

It means, if you have four slider items and one is displaying, you will always slide four items. So always the first item will be visible. I changed this to one and works good for me.

I propose you to create an option to control this number, and if we are already talking about options, it would be nice to control the autoplaySpeed, and other options.

I took a closer look on slicks responsive settings and my the final recommendation is to move the slidesToScroll option to the responsive settings next to the slidesToShow, with the corresponding data attributes:

responsive: [
{
breakpoint: 769,
settings: {
slidesToShow: $collectionnavslider.data(‘ti’),
slidesToScroll : $collectionnavslider.data(‘ti’)
}
}

Regards,
Béla Gábor Zakar

[ThemeLooks Support Team]

Hi Béla,

We have listed this in our theme update list to add a feature in our future update of the theme.

Best regards,
ThemeLooks Support Team

[Author]

Posts