Show half of next slide without Center Mode in Slick Slider

Question

What I want is to have a slider that shows 3.5 slides at once, with the right most slide being the one that is only half shown. I have seen something like this done successfully using centerMode and centerPadding with slick slider, but I do not want the slides to be centered. In other words, I want the left most slide to be flush with the side of the window, totally in view, but the right most slide to be half in the window, half off. Is this possible in slick? I've seen people using slidesToShow: 3.5, but this makes the left most slide go half off the screen and I need it on the right.

Paestum

Answer 1

No need to add "slidesToShow: 3.5 option"

Just call slick:-

$('.Your-container').slick({
    arrows: false,
});

and add following CSS:

.slick-list{padding:0 20% 0 0 !important;}

Either you can give a fixed padding to the right or percentage.

Insertion

Thanks Abdul! Much cleaner solution. – Paestum

That is such a time saver. God bless you. – Herb

Thank you. However please note it won't work if you add the style directly in the browser via the inspector, in case you're trying to test it. You need to place it in the files loaded by the browser. – Bradski

.slick-list{padding:0 20% 0 0 !important;} worked for me. As slick functionalityit self add padding:0; to the .slick-list class that overwrites our css. – Cabal

Answer 2

You can do something like this slidesToShow: 3.5 and make infinite: false. The right most slide will be showing half.

Cutaneous

The infinite: false does the trick, been banging my head on this for a while! – Shetler

I just tried this and it shows half of the previous slide, not next,. – Allness

how is this answer second to the other one? This is clearly the best answer. Thank you. – Flabbergast

Answer 3

You can also do this in slick by adding these two parameters in the slick init:

centerMode: true,
centerPadding: '20%',

This is the equivalent to

.slick-list{padding:0 20% 0 0;}

Flattie

That's well and good, but note that the question asks for this layout without using centerMode. – Paestum

It can't be equivalent of 0 20% 0 0, cause in your case you can see left and right slide. And in 0 20% 0 0 - only right. – Fouquet

Answer 4

Please beware of using slidesToShow with decimal places.

According to Official Documentation slidesToShow is of type int and not float. Using it as float is causing unpredictable exceptions on breakpoint event (when you have custom breakpoint option specified).

You can read more about those issue in official Slick GitHub threads here, here.

Mateya

slidesToShow is of type int – Tivoli

@DrewCordano yeah - this is what I stated in the comment above :) – Mateya

Answer 5

Maybe need to add important in CSS.

Here is my JS code:

$(this).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    infinite: true,
    arrows: true,
    dots: false,
    centerMode: true,
})

Here is CSS code:

.slick-list {
    padding:0 20% 0 0 !important;
}

Nightwear

Answer 6

My use case is a bit different since I want to show portions of both the previous and next slides, as well as the arrows between the current slide and those slides.

What's working for me so far is adding these styles:

.slick-list {
  /* Show slides that would otherwise be hidden off-screen */
  overflow: visible;
}

.slick-slide:not(.slick-current) {
  /* Make slides other than the current one translucent */
  opacity: 0.4;
}

It's a work-in-progress, but this was the only way I could find to show previous of both the previous and next slides.

Might be worth noting that the setting lazyLoad: "ondemand" is incompatible with this approach, as the preview slides' content won't be loaded until they're in the center.

Tavey