title: How to make a slider with the middle item is bigger than others?
body: <p><a href="https://i.stack.imgur.com/AjWJq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AjWJq.jpg" alt="Slider"></a></p>
  
  <p>I want to realize the same slider as shown at the picture. My middle item is always bigger than the others. I need to use different sizes of images for active slide and the slides that are placed to the sides. So I think to use such as code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li {
    width: $small-item-width;
    height: $small-item-height;
    &amp;.active {
      width: $big-item-width;
      height: $big-item-height;
    }
    position: relative;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
     }
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;
  &lt;div class="big-item"&gt;&lt;/div&gt;
  &lt;div class="small-item"&gt;&lt;/div&gt;
  &lt;/li&gt; 
  &lt;li class="active"&gt;
  &lt;div class="item big"&gt;&lt;/div&gt;
  &lt;div class="item small"&gt;&lt;/div&gt;
  &lt;/li&gt;   
  &lt;/ul&gt;  </code></pre>
  </div>
  </div>
  </p>
  
  <p>The only solution I found at Internet is the <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick Slider</a> with center mode. But the markup that is used here is not suitable for my case 'caurse there are only one  child to slide.
  <a href="https://i.stack.imgur.com/8Ujnb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8Ujnb.png" alt="enter image description here"></a></p>
  
  <pre><code> &lt;div class="your-class"&gt;
    &lt;div&gt;your content&lt;/div&gt;
    &lt;div&gt;your content&lt;/div&gt;
    &lt;div&gt;your content&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I want to use any plugin and to add class "active" to li then the slide is active. Can anyone knows how to make this?</p>