How to create a slide that shows hidden buttons?

There is a list of buttons, some of which are hidden.

You need to create a slide, which when you clicked on the "next" button switched to the next button, and if it is hidden, it showed this hidden button, when switching to the next hidden button, the previous one should disappear, and the current one should appear.

When switching to hidden buttons, the main buttons must maintain their state.

HTML

// Cписок с кнопками <ul> <li class="slide visible"><button class="btn"/>Button Visible One</li> <li class="slide visible"><button class="btn"/>Button Visible Two</li> <li class="slide hidden"><button class="btn"/>Button Hidden One</li> <li class="slide hidden"><button class="btn"/>Button Hidden Two</li> </ul> // Кнопки для передвижения <button id="previous">Previos</button> <button id="next">Next</button> 

CSS

 .hidden { display: none; } .visible { display: block; }