Howdy, Stranger!

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

Sign In Register

Quick Links


Shells Virtual Desktop
BMail.ag - Secure Email Service
Server.net
CPLicense.net
VPS Server
Buy VPN
Vultr
VMs for AI
HostDare
HostDare
ReliableSite White-Label Dedicated Hosting for Resellers
25% Recurring Discount on NVMe VPS
InterServer VPS
BMail.ag - Secure Email Service
Best VPN
High-Performance Bare Metal Server Solutions
Karvl.com
Server Mania Cloud Hosting
DataWagon Hosting
AlphaVPS Hosting
Evoxt.com
Clouvider
VPS Hosting with NVMe
Residential IPs in the US & 4G Mobile Proxies in EU & US with Unlimited Bandwidth
ReliableSite White-Label Dedicated Hosting for Resellers
Rabisu - Hosting Solutions
CloudLinux
Shells Virtual Desktop

Categories

In this Discussion

Home › Help
New on LowEndTalk? Please Register and read our Community Rules.

All new Registrations are manually reviewed and approved, so a short delay after registration may occur before your account becomes active.

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

bdspicebdspice Member
in Help

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?

Comments

  • FAT32FAT32 Administrator, Deal Compiler Extraordinaire
    edited September 2020

    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
  • bdspicebdspice Member

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

Sign In or Register to comment.