Hooper isn't working fine when images are async

[JFGHT]

Describe the bug I am retrieving the images I want to add to Hooper from Google Storage. It turns out that Hooper won't display correctly these images that are obtained later.

To Reproduce Code to reproduce the behavior:

<hooper ref="gallery" :items-to-show="images.length" :center-mode="false" 
:infinite-scroll="true" class="property__slider property__slider__thumbs">

 <slide v-for="(image, i) in images" :key="i">

    <span class="property__fund__image__span">
       <img class="img-fluid property__fund__image" :src="image" alt="Fund pic" @click="slideTo(i)"/>
    </span>

 </slide>

</hooper>

Where images comes from props and it is the array of strings to the url of the imgs.

Expected behavior Hooper should render a slide per downloaded image and it doesn't.

[JFGHT]

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.

[ismail9k]

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.

[JFGHT]

Working perfectly!

Closing issue.

[jflaflamme]

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.

[pumano]

any news about lazy loading support?

[ismail9k]

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

[pumano]

@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.

[saerose]

@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...

[ismail9k]

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.

[ghisleouf]

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

Thanks for your answer ! Best.