title: How To Fixed the first slide and start from second slide in Slick.js?
body: <p>I am using Bootstrap 4 and <a href="https://kenwheeler.github.io/slick/" rel="nofollow noreferrer">slick slider</a> on my project. I need to show 3 column in card style. So i design the card and then tried slick-slider on it. Its working very well. When i tried to keep 1st card fixed and then use next 2 card for sliding. But its getting out of same row.I want all card in same row.</p>
  <p>This is how i want:
  <a href="https://i.stack.imgur.com/xScN8.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xScN8.jpg" alt="what i want" /></a></p>
  <p>But this is what i get when i tried:
  <a href="https://i.stack.imgur.com/C2Hnj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C2Hnj.jpg" alt="What i got" /></a></p>
  <p>Here is my code i use which not working:</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>jQuery(document).ready(function ($) {
  $('.sp-carousel').slick({
        
      dots: false,
      arrows: true,
      infinite: true,
      speed: 300,
      autoplay: true,
      autoplaySpeed: 2000,
      slidesToShow: 3,
      slidesToScroll: 1,
      prevArrow: '&lt;button class="slide-arrow prev-arrow"&gt;&lt;/button&gt;',
      nextArrow: '&lt;button class="slide-arrow next-arrow"&gt;&lt;/button&gt;'    
  });
          });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Specialist card details start  */
  .sp-wrapper{ width:100%;padding:1%;}
  .sp-carousel{ width:90%;height:90%; margin:0px auto;}
  
  .cardmain{  margin:10px;}
  .cardmain hr {width:100%;background-color:#ADADAD;opcaity:0.1;margin:2px;}
  .slick-slide img{ width:369px;height:385px;}
  .slick-prev, .slick-next{background: #000;border-radius: 15px;border-color: transparent;}
  
  .card{border: 2px solid #fff;box-shadow: 1px 1px 15px #ccc;}
  .card-header {padding:0;}
  .card-header img {width:100%;}
  .card-body{background:#fff;width:100%;vertical-align:top;padding:10px;}
  .card-content-sp{background:#fff;}
  .card-content-sp h5 {color:#000000;font-weight:400;font-size:18px;line-height:1.3em;margin-top:-1px;margin-bottom:5px;padding:0;}
  .card-title{color:#000000;font-weight:500;font-size:18px;line-height:1.3em;margin-top:0;margin-bottom:0px;padding:0px;}
  .card-text{color:#747373;font-size:14px;font-weight:400;font-size:1em;line-height:1.5;margin:0px;margin-bottom:10px;padding:0;font-family:Roboto-Thin;height:145px;overflow:auto;}
  /* Specialist card details End */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Bootstrap CSS --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /&gt;
  
  &lt;!-- jQuery first then Bootstrap JS --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"&gt;&lt;/script&gt;
    
  
    &lt;div class="sp-wrapper"&gt;
    
  
        &lt;div class="cardmain"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
              &lt;img src="http://via.placeholder.com/369x385?text=dr-samim"&gt;
            &lt;/div&gt;&lt;a href="dr.html"&gt;
            &lt;div class="card-body"&gt;
              &lt;div class="card-content-sp"&gt;
                &lt;div class="card-title"&gt;DR SARKAR MAHBUB AHMED SAMIM&lt;/div&gt;&lt;hr&gt;&lt;h5&gt;Consultant &amp; Co-Ordinator&lt;/h5&gt;
                &lt;div class="card-text"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;   
  
    &lt;div class="sp-carousel"&gt;
  
        &lt;div class="cardmain"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
              &lt;img src="http://via.placeholder.com/369x385?text=dr-2"&gt;
            &lt;/div&gt;&lt;a href="dr.html"&gt;
            &lt;div class="card-body"&gt;
              &lt;div class="card-content-sp"&gt;
                &lt;div class="card-title"&gt;DR SARKAR MAHBUB AHMED SAMIM&lt;/div&gt;&lt;hr&gt;&lt;h5&gt;Consultant &amp; Co-Ordinator&lt;/h5&gt;
                &lt;div class="card-text"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="cardmain"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
              &lt;img src="http://via.placeholder.com/369x385?text=dr-3"&gt;
            &lt;/div&gt;&lt;a href="dr.html"&gt;
            &lt;div class="card-body"&gt;
              &lt;div class="card-content-sp"&gt;
                &lt;div class="card-title"&gt;DR SARKAR MAHBUB AHMED SAMIM&lt;/div&gt;&lt;hr&gt;&lt;h5&gt;Consultant &amp; Co-Ordinator&lt;/h5&gt;
                &lt;div class="card-text"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;  
        &lt;/div&gt;
        &lt;div class="cardmain"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
              &lt;img src="http://via.placeholder.com/369x385?text=dr-4"&gt;
            &lt;/div&gt;&lt;a href="dr.html"&gt;
            &lt;div class="card-body"&gt;
              &lt;div class="card-content-sp"&gt;
                &lt;div class="card-title"&gt;This is the Fourth slider&lt;/div&gt;&lt;hr&gt;&lt;h5&gt;Consultant &amp; Co-Ordinator&lt;/h5&gt;
                &lt;div class="card-text"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt; 
        &lt;/div&gt;
        &lt;div class="cardmain"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
              &lt;img src="http://via.placeholder.com/369x385?text=dr-5"&gt;
            &lt;/div&gt;&lt;a href="dr.html"&gt;
            &lt;div class="card-body"&gt;
              &lt;div class="card-content-sp"&gt;
                &lt;div class="card-title"&gt;This is the Fifth slider&lt;/div&gt;&lt;hr&gt;&lt;h5&gt;Consultant &amp; Co-Ordinator&lt;/h5&gt;
                &lt;div class="card-text"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="cardmain"&gt;
          &lt;div class="card"&gt;
            &lt;div class="card-header"&gt;
              &lt;img src="http://via.placeholder.com/369x385?text=dr-6"&gt;
            &lt;/div&gt;&lt;a href="dr.html"&gt;
            &lt;div class="card-body"&gt;
              &lt;div class="card-content-sp"&gt;
                &lt;div class="card-title"&gt;This is the Sixth slider&lt;/div&gt;&lt;hr&gt;&lt;h5&gt;Consultant &amp; Co-Ordinator&lt;/h5&gt;
                &lt;div class="card-text"&gt;
                  &lt;p&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt; 
  
  
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is the code which working well but i dont want exactly:
  <a href="https://jsfiddle.net/mczkqv75/2/" rel="nofollow noreferrer">https://jsfiddle.net/mczkqv75/2/</a></p>
  <p>How can i fixed the first slider or first card then make slider from 2nd card?</p>