title: Slick slider change opacity of first and last items
body: <p>I would like to change the opacity of the first and last items of the slick slider. Now, the center mode is set to true but I couldn't find CSS selector to make this happen. 
  This is what I actually need:</p>
  
  <p><a href="https://i.stack.imgur.com/JNYi3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JNYi3.png" alt="enter image description here"></a></p>
  
  <p>Here is my current code.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>   &lt;div id="home_latest"&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
           &lt;img src="default.jpg"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>jQuery('#home_latest').slick({
       slidesToShow: 4,
       centerMode: true,
       dots: false,
       centerPadding: '220px',
       prevArrow: "&lt;a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_left'&gt;&lt;img src='assets/img/slider-left-arrow.png'&gt;&lt;/a&gt;",
       nextArrow: "&lt;a href='javascript:void(0)' class='slick_slider_nav slick_slider_nav_right'&gt;&lt;img src='assets/img/slider-right-arrow.png'&gt;&lt;/a&gt;",
    });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/rahulna/9y2mfqtp/32/" rel="nofollow noreferrer">JSFiddle</a> </p>
  
  <p>Thank you</p>