Slide width is 0px

[simondrabble]

Describe the bug The width of each slide is 0px, resulting in all slides being squashed on top of each other.

To Reproduce Steps to reproduce the behavior:

1. Follow "Getting Started" instructions.

Expected behavior Slides display as in examples.

Screenshots

Desktop (please complete the following information):

• OS: MacOS 10.15.6
• Browser Firefox
• Version: 79.0

Additional context I'm also using bootstrap, with all page content inside a bootstrap container.

[lowercasename]

I've got this same issue too, but I'm not using Bootstrap. It doesn't seem to make a difference what content I put in the slides - images or a single line of text - nor how many slides I ask Hooper to show; all the slides are always squashed together with width: 0.

[DarioCorno]

Did someone find a solution for this problem? I'm having it too

[cormacdoesprogramming]

I've just ran into the exact same error within a project where I already had a hooper slider working in a very similar way to how I was implementing it the second time.

Anyways the cause of this issue for me was that I had the hooper component wrapped in a 'v-show'. Since the page I was working on was dynamic meaning I had a lot of v-shows and v-ifs scattered about. After switching all of the parent components to use v-if instead of v-show the hooper slider displayed properly.

Hope this helps if you need a code example please let me know!

[Stampeder525]

I'm also having this issue - I'm putting the slides in a v-for. I've got a lot of slides, so I sorta need to do it this way without replicating a bunch of code, but is that going to just fundamentally break it?

[srochefortNmedia]

This solution should correct the problem: In your CSS:

.hooper-slide {
    min-width: 100%;
}

I tried first to put an inline style to the slide but I don't know what could be the result in all the cases, and inline style is not great at all.

[StuartCreed]

Hooper dynamically calculates the widths. In my case I had a carousel that was dynamically populated by a search. On page load the width was zero as there was nothing in the carousel. But on user search the carousel width did not change from zero when there were images in the carousel. I used this update method to recalculate the widths https://baianat.github.io/hooper/api.html#methods on search input. To invoke this put a ref on the hooper element e.g. called "hooper" and trigger it using $this.refs.hooper.update()

[sudamonline]

I found that the reason for why the width was zero was because my sider was wrapper in a boostrap grid.

This resulted in the width being 0. Once I removed the wrapper, it worked fine!

Hope this helps!