I recently created a slideshow by modifying some code I found from this original source.
For those interested, here is the link to view the slideshow on jsfiddle:
The issue I encountered is that when attempting to display two separate slideshows on the same page, the buttons of the second slideshow end up controlling the first one due to hard-coded CSS.
Is there a way to modify the code to allow for multiple independent slide shows on a single webpage?
Snippet of the HTML code used:
<div id="slideshow-wrap">
<input type="radio" id="button-1" name="controls" checked="checked"/>
<label for="button-1"></label>
Snippet of the problematic CSS code:
#slideshow-wrap input[type=radio]#button-1:checked~label[for=button-1] { background-color: rgba(100,100,100,1) }
#slideshow-wrap input[type=radio]#button-2:checked~label[for=button-2] { background-color: rgba(100,100,100,1) }
#slideshow-wrap input[type=radio]#button-3:checked~label[for=button-3] { background-color: rgba(100,100,100,1) }