title: Fade effect on Slick's carousel edge
body: <p>I'm using Ken Wheeler's plugin, <a href="http://kenwheeler.github.io/slick/" rel="nofollow noreferrer">Slick carousel</a>, and as you can see in the image below, when a slide is sliding at the edge, it looks like it's being cut off. I'm thinking of a "fading edge", in which when a slide slides at the edge, it has a "softer" effect. Instead of this abrupt slide disappearance, a gradual (just like a fade effect) one. Is there any way to do it?</p>
  
  <p><a href="https://i.stack.imgur.com/cldUQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cldUQ.png" alt="enter image description here"></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>$('.carousel').slick({
    arrows: false,
    autoplay: true,
    autoplaySpeed: 1000,
    speed: 2000,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 4
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 2
        }
      }
    ]
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    padding: 40px;
    background-color: blue;
  }
  
  .slick-slide {
    margin: 0px 20px;
  }
  
  .slick-slide img {
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"&gt;&lt;/script&gt;
  &lt;script src="main.js"&gt;&lt;/script&gt;
  &lt;div class='container'&gt;
    &lt;div class='carousel'&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/kkVWQR4.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/RRWm3lB.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/2f2pUHi.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/7TSiIkS.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/dXxnAnC.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/kkVWQR4.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/RRWm3lB.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/2f2pUHi.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/7TSiIkS.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;a href="#"&gt;&lt;img src="http://i.imgur.com/dXxnAnC.jpg" alt=""&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>