title: Carousel with zooming of current slide
body: <p>I used the Slick.js to make a carousel just like on a picture, but I failed (
  Does anybody knows any way to make a carousel just like on a picture? There should be a different width of slides, animation, and a current slide must have a bigger size</p>
  
  <p>What I need to do:</p>
  
  <p><a href="https://i.stack.imgur.com/kScfg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kScfg.png" alt="enter image description here"></a></p>
  
  <p>What I have now - <a href="https://jsfiddle.net/fiter92/xL5qezxy/" rel="nofollow noreferrer">https://jsfiddle.net/fiter92/xL5qezxy/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(document).ready(function($){
  
      $('.carousel').slick({
          infinite: true,
          slidesToShow: 4,
          slidesToScroll: 1,
          arrows: false,
          centerMode: true,
          centerPadding: '60px',
          variableWidth: true
      });
  
      $('.carousel-nav').slick({
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          autoplay: true,
          arrows: true,
          appendArrows: '.carousel-arrows',
          prevArrow: '&lt;span class="carousel-prev"&gt;&amp;lt;-&lt;/span&gt;',
          nextArrow: '&lt;span class="carousel-next"&gt;-&amp;gt;&lt;/span&gt;',
          asNavFor: '.carousel',
      });
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slick-slide {
      padding: 20px;
  }
  
  .slick-current img {
      width: 120%;
      max-width: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"&gt;&lt;/script&gt;
  &lt;div class="carousel"&gt;
      &lt;div&gt;
          &lt;img src="http://dummyimage.com/600x400/000/fff&amp;text=1" alt=""&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="http://dummyimage.com/600x400/000/fff&amp;text=2" alt=""&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="http://dummyimage.com/600x400/000/fff&amp;text=3" alt=""&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="http://dummyimage.com/800x400/000/fff&amp;text=4" alt=""&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="http://dummyimage.com/400x400/000/fff&amp;text=5" alt=""&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;img src="http://dummyimage.com/600x400/000/fff&amp;text=6" alt=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="carousel-nav"&gt;
      &lt;div&gt;01&lt;/div&gt;
      &lt;div&gt;02&lt;/div&gt;
      &lt;div&gt;03&lt;/div&gt;
      &lt;div&gt;04&lt;/div&gt;
      &lt;div&gt;05&lt;/div&gt;
      &lt;div&gt;06&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="carousel-arrows"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>