Hooper isn't working fine when images are async about hooper HOT 10 OPEN

We are currently working on adding a "lazy loading image" feature, sure it will be available in the following release.

hooper.restart() is just re-initializing the slides it used only when you add/remove a slide. If you have two synced carousels, then you have to invoke the method for both carousels.

from hooper.

Hello @abdelrahman3d

I have similar issues with async images, it also doesn't manage well if the slides array is empty at first.

vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'filter' of undefined at VueComponent.initSlides (hooper.esm.js?7e04:399) at VueComponent.created (hooper.esm.js?7e04:599) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4213) at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5002) at new VueComponent (vue.runtime.esm.js?2b0e:5148) at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3283) at init (vue.runtime.esm.js?2b0e:3114) at createComponent (vue.runtime.esm.js?2b0e:5972) at createElm (vue.runtime.esm.js?2b0e:5919)

It does work to update and restart after but I still have that console error.

from hooper.

After update 0.1.1, I tried to make it work but it's not.

My code:

@Watch('images.length')
 onImagesLengthChange(newLength: number, oldLength: number): void {
  if (newLength !== oldLength) {
    // @ts-ignore
    this.$refs.gallery.restart();
  }
}

Now at least, it detects the images correctly but it doesn't show them. I'm gonna take a look at the CSS to see if that's the problem.

By the way, for a sync'ed hooper I also have to use the restart function. Is this appropiate? I mean, if it's synced to another hooper who's supposed to be the father, if the father restarts, the children should also do it.

PS: nice work there.

from hooper.

Working perfectly!

Closing issue.

from hooper.

any news about lazy loading support?

from hooper.

Async data should be supported in 0.3.2, if you still had an issue regarding async data please report it here.

from hooper.

@abdelrahman3d looks like problem in hooper.

Hopper inside another component not working properly and previously I think it's because of async images, but that strange behavior not about async at all. Currently only hooper addon (navigation) not working for me (inside another components with v-if rendering), good working if I slide or wheel images, but totally not working with navigation via clicks. You can check for example my repro url: https://codesandbox.io/s/vue-template-wdxn8
That example inside semantic ui accordion not working totally

If needed I can create separate issue due to different topic of problem.

from hooper.

@abdelrahman3d looks like problem in hooper.

Hopper inside another component not working properly and previously I think it's because of async images, but that strange behavior not about async at all. Currently only hooper addon (navigation) not working for me (inside another components with v-if rendering), good working if I slide or wheel images, but totally not working with navigation via clicks. You can check for example my repro url: https://codesandbox.io/s/vue-template-wdxn8
That example inside semantic ui accordion not working totally

If needed I can create separate issue due to different topic of problem.

I'm having a similar issue as hooper is not getting the settings and rendering whatever number of slides it wants when I try to render async images. I'm not sure if it's that or that the slider per se is inside another component...

from hooper.

Hello @pumano, after investigating your demo, it turns out that Hooper behaves as expected inside another component (I have tested it to make sure). In your example, Hooper is hidden using CSS display: none, so the browser removes the carousel from render-tree; hence when try to calculate carousel's width it will be equal zero.

To probably toggle carousel visibility you have two options here: to use v-if without any issues or to recalculate slides width again after showing the carousel, using updateWidth method.

Here is a sandbox demonstrates the issue.

PS: Regarding the control problem, I have failed to reproduce the issue.

from hooper.

Hi guys, just a little "up" to know if you planned to release this feature soon ?

Thanks for your answer !
Best.

from hooper.