title: slick center mode carousel - I want only 3 product images in mobile view
body: <p>slick center mode carousel - I want only 3 product images in mobile view. Please help</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;My Now Amazing Webpage&lt;/title&gt;
  &lt;link rel="stylesheet" type="text/css" href="slick/slick.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="slick/style.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="content"&gt;
      &lt;div class="slider center"&gt;
        &lt;div&gt;&lt;h3&gt;&lt;img src="images/image1.png"&gt;&lt;p&gt;Toilet Cleaning Gel&lt;/p&gt;&lt;/h3&gt;&lt;/div&gt;
        &lt;div&gt;&lt;h3&gt;&lt;img src="images/image2.png"&gt;&lt;p&gt;Multi-Surface Bathroom Cleaner&lt;/p&gt;&lt;/h3&gt;&lt;/div&gt;
        &lt;div&gt;&lt;h3&gt;&lt;img src="images/image3.png"&gt;&lt;p&gt;Bathroom Cleaner&lt;/p&gt;&lt;/h3&gt;&lt;/div&gt;
        &lt;div&gt;&lt;h3&gt;&lt;img src="images/image1.png"&gt;&lt;p&gt;Toilet Cleaning Gel&lt;/p&gt;&lt;/h3&gt;&lt;/div&gt;
        &lt;div&gt;&lt;h3&gt;&lt;img src="images/image2.png"&gt;&lt;p&gt;Multi-Surface Bathroom Cleaner&lt;/p&gt;&lt;/h3&gt;&lt;/div&gt;
        &lt;div&gt;&lt;h3&gt;&lt;img src="images/image3.png"&gt;&lt;p&gt;Bathroom Cleaner&lt;/p&gt;&lt;/h3&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;script type="text/javascript" src="slick/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="slick/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="slick/slick.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
  
        $('.center').slick({
          dots: true,
          centerMode: true,
          infinite: true,
          centerPadding: '60px',
          slidesToShow: 3,
          speed: 500,
          responsive: [{
              breakpoint: 768,
              settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: '40px',
                  slidesToShow: 3
              }
          }, {
              breakpoint: 480,
              settings: {
                  arrows: false,
                  centerMode: true,
                  centerPadding: '40px',
                  slidesToShow: 3
              }
          }]
      });
      });
    &lt;/script&gt;
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want only 3 products. But it is showing 5 products. width is generating dynamically from slick.js. Please tell me where have to update.</p>