title: Css3 responsive slider automate
body: <p>I have set up a slider with using CSS3 only as described <a href="http://csscience.com/responsiveslidercss3/" rel="nofollow">here.</a></p>
  
  <p>My question is, I have seen css3 animations that are automatic, is there any way to get this slider to auto rotate and still have the buttons work? </p>
  
  <p>The css looks like this:</p>
  
  <pre><code>/* Slider Setup */
  
  input {
  display: none;
  }
  
  #slide1:checked ~ #slides .inner { margin-left:0; }
  #slide2:checked ~ #slides .inner { margin-left:-100%; }
  #slide3:checked ~ #slides .inner { margin-left:-200%; }
  #slide4:checked ~ #slides .inner { margin-left:-300%; }
  
  
  #overflow {
  width: 100%;
  overflow: hidden;
  }
  
  #slides .inner {
  width: 500%;
  line-height: 0;
  }
  
  #slides article {
  width: 20%;
  float: left;
  }
  
  /* Slider Styling */
  
  /* Control Setup */
  
  #controls {
  margin: -25% 0 0 0;
  width: 100%;
  height: 50px;
  }
  
  #controls label { 
  display: none;
  width: 50px;
  height: 50px;
  opacity: 0.3;
  }
  
  #active {
  margin: 23% 0 0;
  text-align: center;
  }
  
  #active label {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #bbb;
  }
  
  #active label:hover {
  background: #ccc;
  border-color: #777 !important;
  }
  
  #controls label:hover {
  opacity: 0.8;
  }
  
  #slide1:checked ~ #controls label:nth-child(2), 
  #slide2:checked ~ #controls label:nth-child(3), 
  #slide3:checked ~ #controls label:nth-child(4), 
  #slide4:checked ~ #controls label:nth-child(1){
  background: url('imgs/next.png') no-repeat;
  float: right;
  margin: 0 -70px 0 0;
  display: block;
  }
  
  
  #slide1:checked ~ #controls label:nth-child(4),
  #slide2:checked ~ #controls label:nth-child(1),
  #slide3:checked ~ #controls label:nth-child(2),
  #slide4:checked ~ #controls label:nth-child(3){
  background: url('imgs/prev.png') no-repeat;
  float: left;
  margin: 0 0 0 -70px;
  display: block;
  }
  
  #slide1:checked ~ #active label:nth-child(1),
  #slide2:checked ~ #active label:nth-child(2),
  #slide3:checked ~ #active label:nth-child(3),
  #slide4:checked ~ #active label:nth-child(4) {
  background: #333;
  border-color: #333 !important;
  }
  
  /* Info Box */
  
  .info {
  line-height: 20px;
  margin: 0 0 -150%;
  position: absolute;
  font-style: italic;
  padding: 30px 30px;
  opacity: 0;
  color: #000;
  text-align: left;
  }
  
  .info h3 {
  color: #333;
  margin: 0 0 5px;
  font-weight: normal;
  font-size: 22px;
  font-style: normal;
  }
  
  /* Slider Styling */
  
  
  
  
  /* Animation */
  
  #slides .inner {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -ms-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  
  -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); 
  transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
  }
  
  #slider {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  }
  
  #controls label{
  -webkit-transform: translateZ(0);
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  }
  
  #slide1:checked ~ #slides article:nth-child(1) .info,
  #slide2:checked ~ #slides article:nth-child(2) .info,
  #slide3:checked ~ #slides article:nth-child(3) .info,
  #slide4:checked ~ #slides article:nth-child(4) .info{
  opacity: 1;
  -webkit-transition: all 1s ease-out 0.6s;
  -moz-transition: all 1s ease-out 0.6s;
  -o-transition: all 1s ease-out 0.6s;
  transition: all 1s ease-out 0.6s;
  }
  
  .info, #controls, #slides, #active, #active label, .info h3, .desktop, .tablet, .mobile {
  -webkit-transform: translateZ(0);
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  }
  </code></pre>
  
  <p>And basically I have four of these, as my slides:</p>
  
  <pre><code>                &lt;article &gt;
                      &lt;div class="info"&gt;                  
                          &lt;div id="slideContent"&gt;
                              &lt;div&gt;
                                  &lt;h1&gt;&lt;/h1&gt;
                                  &lt;h1 style="color:#ff9900;"&gt;&lt;b&gt;&lt;/b&gt;&lt;/h1&gt;
                              &lt;/div&gt;
                              &lt;div id="slideTxt"&gt;&lt;/div&gt;
                              &lt;div id="slideBtn"&gt;&lt;/div&gt;
                          &lt;/div&gt; 
                      &lt;/div&gt;
                      &lt;img src="imgs/slide background" /&gt;
                  &lt;/article&gt;
  </code></pre>