title: Infinite carousel with magnific zooming effect
body: <p>I'm trying to achieve a responsive carousel which supports auto-play infinite loop, and the center item always take 70% of the view port with.</p>
  
  <p>Right now the best I can do is something like this by taking advantage of a library called <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick</a>:</p>
  
  <p><a href="https://codepen.io/anon/pen/pBvQBM" rel="nofollow noreferrer">https://codepen.io/anon/pen/pBvQBM</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>$('.slick')
    .on('init', () =&gt; {
      $('.slick-slide[data-slick-index="-2"]').addClass('lt2');
      $('.slick-slide[data-slick-index="-1"]').addClass('lt1');
      $('.slick-slide[data-slick-index="1"]').addClass('gt1');
      $('.slick-slide[data-slick-index="2"]').addClass('gt2');
  })
    .slick({
    centerMode: true,
    centerPadding: 0,
    slidesToShow: 3,
    autoplay: true,
    autoplaySpeed: 500,
  }).on('beforeChange', (event, slick, current, next) =&gt; {
    $('.slick-slide.gt2').removeClass('gt2');
    $('.slick-slide.gt1').removeClass('gt1');
    $('.slick-slide.lt1').removeClass('lt1');
    $('.slick-slide.lt2').removeClass('lt2');
  
    const lt2 = (current &lt; next &amp;&amp; current &gt; 0) ? current - 1 : next - 2;
    const lt1 = (current &lt; next &amp;&amp; current &gt; 0) ? current : next - 1;
    const gt1 = (current &lt; next || next === 0) ? next + 1 : current;
    const gt2 = (current &lt; next || next === 0) ? next + 2 : current + 1;
  
    $(`.slick-slide[data-slick-index="${lt2}"]`).addClass('lt2');
    $(`.slick-slide[data-slick-index="${lt1}"]`).addClass('lt1');
    $(`.slick-slide[data-slick-index="${gt1}"]`).addClass('gt1');
    $(`.slick-slide[data-slick-index="${gt2}"]`).addClass('gt2');
  
    // Clone processing when moving from 5 to 0
    if (current === 5 &amp;&amp; next === 0) {
      $(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('lt2');
      $(`.slick-slide[data-slick-index="${current}"]`).addClass('lt1');
      $(`.slick-slide[data-slick-index="${current + 2}"]`).addClass('gt1');
      $(`.slick-slide[data-slick-index="${current + 3}"]`).addClass('gt2');
    }
  
    // Clone processing when moving from 0 to 5
    if (current === 0 &amp;&amp; next === 5) {
      $(`.slick-slide[data-slick-index="${current - 1}"]`).addClass('gt2');
      $(`.slick-slide[data-slick-index="${current}"]`).addClass('gt1');
      $(`.slick-slide[data-slick-index="${current - 2}"]`).addClass('lt1');
      $(`.slick-slide[data-slick-index="${current - 3}"]`).addClass('lt2');
    }
  
    console.log('beforeChange', current, ':', lt2, lt1, next, gt1, gt2);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    padding: 20vh 0;
  }
  
  .slick span {
    display: block;
    background: #3498db;
    color: #fff;
    font-size: 36px;
    height: 100px;
    line-height: 100px;
    position: relative;
    text-align: center;
    //border: solid 1px rgb(145, 195, 0);
    
    transform: translate(0, 0) scale(.4);
    transition: all .4s ease;
    opacity: .5;
  }
  
  .slick-slide {
    border: solid 1px #2dc37f;
  }
  
  .slick-slide.lt2 span {
    transform: translate(10%, 0) scale(.6);
  }
  .slick-slide.lt1 span {
    opacity: .7;
    transform: translate(5%, 0) scale(.8);
  }
  .slick-slide.gt1 span {
    opacity: .7;
    transform: translate(-5%, 0) scale(.8);
  }
  .slick-slide.gt2 span {
    transform: translate(-10%, 0) scale(.6);
  }
  .slick-slide.slick-center span {
    z-index: 1;
    transform: scale(1);
    opacity: 1;
    color: #e67e22;
  }
  
  .slick-prev,
  .slick-next{
    position: absolute;
    top: 50%;
    appearance: none;
    margin-top: -10px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: transparent;
    outline: none;
    z-index: 100;
  }
  
  .slick-prev {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 15px 0;
    border-color: transparent #007bff transparent transparent;
    left: 0;
  }
  .slick-next {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #007bff;
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"&gt;&lt;/script&gt;
  &lt;div class="slick"&gt;
    &lt;div&gt;&lt;span&gt;1&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span&gt;2&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span&gt;3&lt;/span&gt;&lt;/div&gt;
    &lt;div&gt;&lt;span&gt;4&lt;/span&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, this is not exactly what I want. In this demo, all three items have the same width, but I want the center item to have 70% width, something like this:
  <a href="https://i.stack.imgur.com/xHsIn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xHsIn.png" alt="enter image description here"></a></p>
  
  <p>Please share some pointers on how I can make it happen. I'm not limited to this Slick library and open to any other options such as pure CSS or JQuery.</p>