images just won't display

[alesinhoo]

I'm testing it before adding it to my website. I don't know what I'm doing wrong:

I added the .js and the .css, liked them properly, added the call after the script:

document.addEventListener("DOMContentLoaded", function(event) { Chocolat(document.querySelectorAll('.chocolat-parent .chocolat-image'), { loop: true, // Other options here }); });

what am i missing?

[alesinhoo]

Also i forgot to clarify how my css and html are structureed:

[nicolas-t]

Hello,

Do you have any error in the devtools console ?
Can you upload your code somewhere so I can check it ? On https://jsfiddle.net/ for example

[alesinhoo]

yeah of course. Sorry for the delay, I'm more of a graphic* designer that a programer, i'm learning.

I replaced it with images from the web so that it works: https://jsfiddle.net/alesinho/zqagmc7w/8/

Also the "chocolate" files are files i copied and pasted from the chocolat.js page

The error i do get is in chocolate.css:
inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'

[nicolas-t]

Thanks,

the jsfiddle fails because of this css rule :

*{
    margin: 0 auto;
}

You shouldn't apply horizontal centering to evey elements of the page.

Here is the working jsfiddle,
I've commented out the breaking css, added tags to import chocolat's js and css, and removed an excess </div> closing tag.
https://jsfiddle.net/b6hjfpLe/1/

[alesinhoo]

thank you so so so so much. I'm sorry for the trouble, I'm new to coding so i apologize if this was too obvious. You saved me. Thank you💖