HTML for Presentations/Slideshows

HTML for Presentations/Slideshows
0

#1

Hello! It’s me again. This time I want to show the freeCodeCamp community the result of a question I had:

“Can I replace Libreoffice Impress, Microsoft PowerPoint or Google’s whatsitsname with HTML on my browser for presentations?”

After discovering Mozilla’s Summit presentation abouth MathML I wanted to try it myself!

My take on it at codepen.

I wanted to use accessKeys for direct access and CSS flex. Also there’s a little fade to get transitions here too. You can use the directional arrows for navigation. It doesn’t use JS.
I should certainly expand the CSS for the content, but I’m quite happy with this outline.


#2

I am not sure what I am supposed to do when the page loads. I tried clicking on the arrow keys, but nothing seems to change. All I see is the following no matter which arrow key I click. I must be missing something obvious?


#3

Thanks for your feedback and sorry for that! Are you using your keyboard’s arrows?
When the page loads there’s a out-of-page (position: absolute; left:-10%; ) radio input with the autofocus prop. After that and if focus is not lost you should be able to navigate using ← or → on your keyboard. If focus on the radio buttons is lost, you can regain focus using accessKeys (Alt+Shift+1 through 3 on Firefox)
(I thought I had disabled the on-page next and prev buttons)


#4

I am using the left and right arrow keys on the keyboard. I am using Chrome.


#5

:confused:
Would you mind clicking on “Bienvenidos”, pressing Tab once and trying the arrows a last time?


#6

If I go through the steps in the last post, it works with the arrow keys, but that was definitely not clear from the original post. Not sure how a user would just know to click on the title, then click tab and then use the arrow keys.


#7

Thanks for your time!
I didn’t know about the issue because it worked right away on my PC with Chromium 68 and Firefox 61+. I guess I ran afoul of good practices, I’m relying on bugs or got too hacky :sweat_smile:.

It might be something about the autofocus attribute (autofocus on w3schools).

Testing is very important.