title: Multiple slide shows without extensive cut-and-paste
body: <p>I have this slideshow (I have modified from some code <a href="http://cssdeck.com/labs/css3-image-slider" rel="nofollow">origional source</a>)</p>
  
  <p>Here is a jsfiddle link:</p>
  
  <p><a href="http://jsfiddle.net/supagu/K3Esz/" rel="nofollow">Full source here</a></p>
  
  <p>The CSS looks to be hard coded such that if I try to display two different slideshows on the same page then I run in to problems where the buttons from the second slideshow controls the first slideshow.</p>
  
  <p>Is there some way I can modify things to allow multiple separate slide shows on a webpage?</p>
  
  <p>HTML snippet:</p>
  
  <pre><code>&lt;div id="slideshow-wrap"&gt;
      &lt;input type="radio" id="button-1" name="controls" checked="checked"/&gt;
      &lt;label for="button-1"&gt;&lt;/label&gt;
  </code></pre>
  
  <p>CSS snippet:</p>
  
  <pre><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) }
  </code></pre>