title: Slick Slider Center Mode doesnt work
body: <p>I use the Center Mode from the Slick Slider. Now i have the problem that i want the slider in full width and that the centered Image is much larger than the slides. I added a image from the template:</p>
  
  <p><a href="http://i.stack.imgur.com/1lwMK.png" rel="nofollow">Slider Template</a></p>
  
  <p>My site ist hosted on: <a href="http://be-virtual.org/schnittchen/" rel="nofollow">http://be-virtual.org/schnittchen/</a></p>
  
  <p>My Code is the following
  Javascript:</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>     $(document).on('ready', function() {
  
        
  $('.center').slick({
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 3
        }
      },
      {
        breakpoint: 480,
        settings: {
          arrows: false,
          centerMode: true,
          centerPadding: '40px',
          slidesToShow: 1
        }
      }
    ]
  });
    
  
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slick-center .slide-h3{
      color: #FFF;
    }
    .slider{
      width: 600px;  
      height:150px;
      margin: 20px auto;    
      text-align: center;
    }
  
  .slider button {
    background: #000;
  }
  
  .slider button:hover button:active button:visited {
    background: #000;
  }
  
    .slide-h3{
      margin: 10% 0 10% 0;
      padding: 40% 20%;
      background: #008ed6;
    }
    .slider div{
      margin-right: 5px;
    }
    .slick-slide{
      opacity: .6;
    }
    .slick-center{
      display: block;
      max-width: 10% !important;
      max-height:20% !important;
      opacity: 1;
  
  
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;section class="center slider"&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=1"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=2"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=3"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=4"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=5"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=6"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=7"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=8"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;img src="http://placehold.it/350x300?text=9"&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Sorry iam new at the coding and new in this community. Please have some 
  patience and indulgence.</p>