How To Fixed the first slide and start from second slide in Slick.js?

bdspice

I am using Bootstrap 4 and slick slider 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.

This is how i want:

But this is what i get when i tried:

Here is my code i use which not working:https://jsfiddle.net/wjf6edhn/

Here is the code which working well but i dont want exactly: https://jsfiddle.net/mczkqv75/2/

How can i fixed the first slider or first card then make slider from 2nd card?

FAT32

There's so many things that can be improved but if you want a copy and paste solution, use this:

Add this to your CSS:

.sp-wrapper {
  display: flex;
}

.sp-carousel {
  flex: 0 0 66.67%;
  min-width: 66.67%;
  max-width: 66.67%;
}

And change slidesToShow in your JS into 2:

slidesToShow: 2,

Disclaimer: The solution above is in no way complete (such as the weird margin / padding inconsistency), it is just a monkey patch to make it "works"

bdspice

@FAT32 said:
There's so many things that can be improved but if you want a copy and paste solution, use this:

Add this to your CSS:

.sp-wrapper {
  display: flex;
}

.sp-carousel {
  flex: 0 0 66.67%;
  min-width: 66.67%;
  max-width: 66.67%;
}

And change slidesToShow in your JS into 2:

slidesToShow: 2,

Disclaimer: The solution above is in no way complete (such as the weird margin / padding inconsistency), it is just a monkey patch to make it "works"

Thanks But i didn;t understand your disclaimer. since its just a part of a ~~~~full css, you might find this weird.