title: Give angles to images in circular slider
body: <p>I'm making a circular image slider. When a user clicks on any images it slides into center. On the left side images I want to to add in class to give some angle, and right side image I want to add in different class to give different angle.</p>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$(document).on('click', 'img', function() {
      var t=$(this);
      t.prevAll().removeClass('t2').addClass('t1');
      t.nextAll().removeClass('t1').addClass('t2');
  }
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.t1
  {
      transform: skewX(5deg) skewY(175deg); /* W3C */
      -webkit-transform: skewX(5deg) skewY(175deg); /* Safari &amp; Chrome */
      -moz-transform: skewX(5deg) skewY(160deg); /* Firefox */
      -ms-transform: skewX(5deg) skewY(175deg); /* Internet Explorer */
      -o-transform: skewX(5deg) skewY(175deg); /* Opera */
  }
  
  .t2
  {
      transform: skewX(-5deg) skewY(15deg); /* W3C */
      -webkit-transform: skewX(-5deg) skewY(10deg); /* Safari &amp; Chrome */
      -moz-transform: skewX(-5deg) skewY(5deg); /* Firefox */
      -ms-transform: skewX(-5deg) skewY(10deg); /* Internet Explorer */
      -o-tran
  }
  </code></pre>
  
  <p>On click event of image I am giving angle, but on click of last '12th' images will not show correct alignement because previous all will go in same class, how to do it?</p>
  
  <p><img src="https://i.stack.imgur.com/DaYfA.png" alt="enter image description here">  </p>