Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Advertise on LowEndTalk.com
How To Fixed the first slide and start from second slide in Slick.js?
New on LowEndTalk? Please read our 'Community Rules' by clicking on it in the right menu!

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

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?

Never Build Character with Money & Never Ruin Character for Money.

Comments

  • FAT32FAT32 Administrator, Deal Compiler Extraordinaire
    edited September 6

    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"

    Thanked by 1bdspice

    "Everyone you meet is fighting a battle you know nothing about. Be kind. Always."

  • @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.

    Never Build Character with Money & Never Ruin Character for Money.

Sign In or Register to comment.