search

Splidejs / splide

Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.
https://splidejs.com
MIT License
4.9k stars 424 forks source link

Making a simple splide with 3 images direction ttb causes "Uncaught Error: [splide] height or heightRatio is missing." #1024

Open bertvandepoel opened 1 year ago

bertvandepoel commented 1 year ago

Checks

Version

4.1.3 (well, the file says 4.1.2 but it is the latest download)

Description

I'm trying to create a vertical slider that I can style myself, so I was very glad to read about splide. I've however run into a strange issue. A basic example works fine, but once I add direction: 'ttb' as an option, the slider stops working. In my browser console I see the following error: Uncaught Error: [splide] height or heightRatio is missing.

I've seen in previous issues that this is associated with issues that concern display:none. However, I'm not using that CSS property. Perhaps it is caused by the fact that my slides consist of only an image each? I don't specifically mind that I would need to specify a height of some kind, but the documentation does not seem to relay any kind of relation between direction ttb and height, so I thought it would be a good idea to file a bug report to aid in the improvement of this library.

Reproduction Link

http://bert.ulyssis.be/splide_error/

Steps to Reproduce

Simply create a splider with a few images as slides. This will work just fine, then add direction ttb as an option. I've supplied a minimal example like this too.

Expected Behaviour

I expected things to just work, without an error and without the need for a height option (thought to be clear it does work when I specify a height).

NaotoshiFujita commented 1 year ago

https://splidejs.com/#ttb-heading

As the error log says, TTB requires height or heightRatio and it's by design.

bertvandepoel commented 1 year ago

I see. I would suggest to also add this to https://splidejs.com/guides/options/#direction as I did not look at examples but used the documentation pages, including the one for options, when writing my code. It's fine for me if it's by design, but then I would expect it to be noted on the official documentation and not just on the main page as part of examples.