search

baianat / hooper

🎠 A customizable accessible carousel slider optimized for Vue
https://baianat.github.io/hooper/
MIT License
720 stars 131 forks source link

Infinite Scroll slider was not correct when changed a language with vue-i18n plugin. #72

Closed imjeen closed 5 years ago

imjeen commented 5 years ago

Firstly, thanks for the slider, it is very good.

Describe the bug

Recently I use the hooper width the vue-i18n plugin, and I make the slider setting width the settings prop, see bellow: 

{
      infiniteScroll: true,
      autoPlay: true,
      playSpeed: 3000,
      wheelControl: false,
}

When change the language, the clone item was lost. see the example (codepen)

To Reproduce Steps to reproduce the behavior:

  1. Set infiniteScroll=true
  2. Change the language

the items of Infinite Scroll slider were disappeared.

Expected behavior Only change a component local language, the slider should be normal.

Screenshots see the example (codepen)

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context

ismail9k commented 5 years ago

This happens because Vuei18n uses $forceUpdate to update all translations when the local changes, Which conflicts with Hooper's cloned slides and cause them not to re-render again. We will investigate more on this, and try to fix it from our side.