Cannot get infinite slider working with dynamic box widths

[nicolaseielll]

I'm trying to create a logo slider with the horizontalLoop helper function, my problem is that the logos are different widths & I would need the spacings between them to be equal so that they would not seem uneven. This requires the boxes to be the width of the logos but the slider breaks if I take the static width off from CSS.

Is there a simple solution to this or would it require editing the original loop function?

Here's a simple demo of the problem:https://stackblitz.com/edit/nuxt-starter-ejwuh5?file=components%2FSlider.vue

I tried to make it as simple as possible, you can try to add/remove the width from the box to see the problem.

Thank you guys in advance, I really appreciate what you're doing with this platform!

 

[nicolaseielll]

It seems to be working better after I added spacers to the sides of the logo instead of padding but it still seems to break completely after route change.

[Rodrigo]

Hi,

 

I had a quick glance at your code and instead of trying to solve the issue there I created an example using page transitions and the helper function:

https://stackblitz.com/edit/nuxt-starter-dhwrqn

 

As you  can see it works as expected on route changes, so there must be something else in your setup that is causing this.

 

Hopefully this helps.

Happy Tweening!