title: How to build a pure CSS3 image slider with prev/next buttons?
body: <p>I want to build an easy image slider, which switches smoothly between the images on clicking the prev/next buttons. Unfortunately, I don't have any JS knowledge and I hope that this task is doable without using it, basing on pure CSS. Although,  I did implement some copy/paste JS elements, but I don't know how to code in this language.  Specifically, it's going to be an opinion slider which I what to look dynamic. </p>
  
  <p>Here goes the HTML/CSS and a picture of the final effect:</p>
  
  <pre><code>/*HTML*/
  
  &lt;section id="opinions_wrapper"&gt;
      &lt;img id="left_arrow" src="img/left_arrow.jpg"&gt;
  
      &lt;div id="opinions_slider"&gt;
  
      &lt;img class="photo_opinions" src="img/theface.png"&gt;
      &lt;h4&gt;Joe Doe&lt;/h4&gt; 
      &lt;h4 class="position"&gt;President of BlueBlue/h4&gt;
      &lt;img id="decoration_line" src="img/decoration-line.png"&gt;
      &lt;p class="opinion"&gt;ILorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tincidunt erat tempor lectus     
  
  placerat fermentum. Pellentesque ac malesuada nisl. Suspendisse elementum odio nunc, non gravida leo fermentum  nec. 
  
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. &lt;/p&gt;
  
      &lt;/div&gt;        
  
      &lt;img id="right_arrow" src="img/right_arrow.jpg"&gt;   
   &lt;/section&gt;
  
  
  
  /*CSS*/
  
  
  
  #opinions_wrapper {
  
  width: 690px;
  height: 390px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  
      }
  
  #opinions_slider {
  
  width: 600px;
  height: 390px;  
  
  
      }
  
  #left_arrow,#right_arrow {
  
  width: 45px;
  height: 46px;
  padding-top: 170px;
  opacity: 0.8;
  transform: scale(0.9,0.9);
  transition: all .3s;
      }
  
  #left_arrow:hover,#right_arrow:hover {
  
  opacity: 1;
  transform: scale(1,1);
  
      }
  
  .foto_opinions {
  
  display: block;
  margin: 0 auto;
      }
  
  h4 {
  
  width: 290px;
  font-size: 2.5em;
  color: #3a383a;
  text-align: center;
  margin: 0 auto;
  padding-top: 15px;
  
  
      }
  
  h4.position {
  
  font-size: 2em; 
  color: #c11a67;
  padding: 0;
      }
  
  #decoration_line {
  
  width: 415px;
  height: 11px;
  margin: 0 auto;
  display:block;
  padding-top: 15px;
      }
  
  
  .opinion {
  
  width: 490px;
  height: 150px;
  color: #3a383a;
  text-align: center;
  margin: 0 auto;
  font-size: 1.8em;
  padding-top: 15px;
  
      }
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/cEtMh.jpg" rel="nofollow">Example</a></p>