I assume, I got your question clearly.
I do not see a need of bringing 4 different buttons on every slide. Are you getting the data for the slides from any db or store?
Can't create a data model that determines what would be the text content, picture, sound, action and behavior of the buttons and respective widget? You could construct the entire UI just by traversing through the data model and you do not have to manually attach anything or need to bring anything.
Consider a data model like this which nothing but an array of JSON.. (You can change/extend it based on your need, this is just the idea)
let animals = [
{
'image' : 'parrot.png',
'text': 'the parrot',
'onClick': function () { // dosomething},
.
.
.
},
{
}
.
.
.
]
Now build your html by parsing the above data model and each slide traversal could get the next, prev from the data model and render.
In this approach, you are always having 4 button instances. However you are changing their behavior based on the data model on every slide traversal(Prev or next). Let me know what do you think?
Tapas Adhikary
Educator @tapaScript | Founder CreoWis & ReactPlay - Writer - YouTuber - Open Source