title: How do i only show three slides in slick slider?
body: <p>I have a slick slider where the active slide is being zoomed out,and it should be showing only three slides in the slide track. The issue which i am facing is that it is showing three slides but two more is coming from the both extreme sides.I need to show only three slides in the slide track area and nothing from the sides.Please check the code whether it is correct or not and let me know what changes should i make.I have made some changes through custom css and tried a lot of things but it is getting dramatically changed.The final outcome should look like the client testimonial section in given link <a href="http://165.22.181.70/clientell-1/" rel="nofollow noreferrer">http://165.22.181.70/clientell-1/</a> .Please help. Here is what i have done <a href="https://jsfiddle.net/kaunishroy/563t7ejd/5/" rel="nofollow noreferrer">https://jsfiddle.net/kaunishroy/563t7ejd/5/</a></p>
  
  <p>Here is the HTML code :-</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;clientell&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/slick.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/slick-theme.css"&gt;
    &lt;link rel="stylesheet" type="text/css" href="css/custom.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;section class="client-test"&gt;
    &lt;div class="regular slider"&gt;
      &lt;div class="inner-slider"&gt;
        &lt;img src="images/man.png" class="slider-image" alt=""&gt;
        &lt;h2&gt;Leila Taylor&lt;/h2&gt;
        &lt;p&gt;Thanks yet again for another successful and very popular mobile app.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="inner-slider"&gt;
        &lt;img src="images/man.png" class="slider-image" alt=""&gt;
        &lt;h2&gt;Leila Taylor&lt;/h2&gt;
        &lt;p&gt;Thanks yet again for another successful and very popular mobile app.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="inner-slider"&gt;
        &lt;img src="images/man.png" class="slider-image" alt=""&gt;
        &lt;h2&gt;Leila Taylor&lt;/h2&gt;
        &lt;p&gt;Thanks yet again for another successful and very popular mobile app.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="inner-slider"&gt;
        &lt;img src="images/man.png" class="slider-image" alt=""&gt;
        &lt;h2&gt;Leila Taylor&lt;/h2&gt;
        &lt;p&gt;Thanks yet again for another successful and very popular mobile app.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="inner-slider"&gt;
        &lt;img src="images/man.png" class="slider-image" alt=""&gt;
        &lt;h2&gt;Leila Taylor&lt;/h2&gt;
        &lt;p&gt;Thanks yet again for another successful and very popular mobile app.&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="inner-slider"&gt;
        &lt;img src="images/man.png" class="slider-image" alt=""&gt;
        &lt;h2&gt;Leila Taylor&lt;/h2&gt;
        &lt;p&gt;Thanks yet again for another successful and very popular mobile app.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
  
    &lt;script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;script src="js/slick.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      $(document).on('ready', function() {
        $(".regular").slick({
          dots: true,
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3,
          centerMode: true
        });
      });
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the CSS code :-</p>
  
  <pre><code>* {
    box-sizing: border-box;
  }
  
  .slider {
      width: 50%;
      margin: 100px auto;
  }
  
  .slick-slide {
    margin: 0px 20px;
  }
  
  .slick-slide img {
    width: 100%;
  }
  
  .slick-prev:before,
  .slick-next:before {
    color: transparent;
  }
  
  
  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
  }
  
  .slick-active {
    opacity: .5;
  }
  
  .slick-current {
    opacity: 1;
  }
  .client-test{
    padding: 4em 0;
  }
  .client-test .slick-prev,.client-test .slick-next{
    top: 122%;
  }
  .client-test .slick-dots{
    display: none !important;
  }
  .client-test .slick-next{
    right: 45%;
    background:url('../images/next.png');
    background-repeat: no-repeat;
    width:50px; 
  }
  .client-test .slick-prev{
      left: 45%;
      background:url('../images/prev.png');
      background-repeat: no-repeat;
      width:50px;
  }
  .client-test .slider-image{
    width:20%;
    margin: 0 auto;
  }
  .client-test .inner-slider{
    text-align: center;
    border: 1px solid;
    padding:20px;
    transition: all 0.5s ease-in-out 0s;
    z-index: 9;
    position: relative;
    border-radius:4px;
    background:#ffffff;
    transition: all 0.5s ease-in-out 0s;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.10);
  }
  .client-test .slider{
    width:1000px;
    max-width: 100%;
  }
  .client-test .slick-slide{
    width:300px !important;
    max-width: 100%;
    z-index: 0;
    margin: 0 !important;
    position: relative;
  }
  .client-test .slick-current{
    transform:scale(1.1);
    z-index: 9;
    position: relative;
    transition: all 0.5s ease-in-out 0s; 
  }
  .client-test .slick-track{
    padding: 40px 0;
  }
  </code></pre>
  
  <p>Here is the js code :-</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $(document).on('ready', function() {
        $(".regular").slick({
          dots: true,
          infinite: true,
          slidesToShow: 3,
          slidesToScroll: 3,
          centerMode: true
        });
      });
  &lt;/script&gt;
  </code></pre>