slide.js | Mobile slideshow component

At a minimum, it looks like one problem is that:

1. You have an image element with ID diapo in your HTML, and then in the DOM, which has an empty src attribute.
2. In slide.js, you attempt to create a new instance of the class Diaporama, called diaporama, using the empty src attribute that you have stored in the variable src in slide.js.
3. Since an img element needs a src attribute with an actual URL, in order to show the image at that URL, you are seeing nothing, since you have not provided a URL (You won't get an error either, since an empty src attribute is perfectly valid HTML, and causes no JS errors)

The critical issue (or oversight), is that you have:

1. a carousel element in the index.html file, which is then represented in the DOM (which is what we expect)
2. an instance of class Diaporama called diaporama in slide.js, which has no link to the DOM carousel that you want it to have: all diaporama has is a String, taken from the src attribute of the DOM carousel, which refers to the URL path of various images. The diaporama instance can never "reach out" and update the DOM carousel, given the code you have written.

Thankfully, the fix is very simple.

As you know, there needs to be link between the DOM and object that you have created; creating such a link is straight-forward and just involves DOM queries.

I have added a solution (I have placed ALL the JS in one file, rather than two files -- as you have -- but this is not important)

useState is async by nature but doesn't return a promise, but to solve the asynchronous nature of useState and a quick dirty fix would be to just put a null propagation on your data e.g.

slideshow?.map

but how I would do it would be something like this: Just throwing some ideas for you

le quite la clase row al div de las diapositivas y funciona igual al bootstrap3 a #slide ul lo mantuve con position:relative y a #slide #paginacion lo cambié a position: absolute.

eso es todo,funciona igual q en bootstrap3.

You have declared an event listener for the next button, however you never trigger the method "clickme" to record the clicks.

Few things.. "../../IMAGES\favicon\favicon-32x32.png" is probably not going to fly on a web server. If xxx.com is your site, and your images are in (webroot)/images/, then just link to

/images/favicon/favicon-32x32.png

Same with css.. Just make sure the directories line up. In your example you are attempting to link to the webroot directory with

However, you said your css files are in the css folder? So perhaps try

instead?

Honestly this is hard to help without seeing the page live but if you are in doubt that something is loading just inspect source and try to go to the file directly (right click, press inspect source, and click on the href to see if it loads, and where it is trying to load from). You can then move things around on your server until it works.

You might wanna register an event handler on slide action of the carousel. Something like this

You are doing fine, just remember that position and display are tricky CSS options that you need to master by trying out and understanding what they do.

Your example was missing some width and height on the #diapo* elements. The p started to fill in the blanks of the missing space.

I added some background-color, so you can debug it more easily.

References: https://zellwk.com/blog/css-positions/ and https://developer.mozilla.org/en-US/docs/Web/CSS/display

You could use the rows setting.