24

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.

rogue-one
  • 10,209
  • 6
  • 47
  • 59
Cook88
  • 459
  • 1
  • 4
  • 14

6 Answers6

62

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;}

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

Ḟḹáḿíṅḡ Ⱬỏḿƀíé
  • 2,093
  • 5
  • 21
  • 32
Abdul Rahman
  • 652
  • 7
  • 5
  • Thanks Abdul! Much cleaner solution. – Cook88 Apr 24 '17 at 22:29
  • 1
    That is such a time saver. God bless you. – Marios Pittas Sep 30 '19 at 07:30
  • 1
    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. – Giuseppe Jan 23 '20 at 12:03
  • 1
    `.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. – Code_Art Nov 24 '20 at 20:57
33

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

kophygiddie
  • 746
  • 7
  • 13
18

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;}
Gcamara14
  • 440
  • 4
  • 13
  • 7
    That's well and good, but note that the question asks for this layout without using centerMode. – Cook88 Apr 17 '18 at 18:08
  • 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. – Aleksey Makas Mar 27 '19 at 09:23
6

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.

kosmeln
  • 191
  • 1
  • 7
1

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;
}
showdev
  • 25,529
  • 35
  • 47
  • 67
Jay Gangkun
  • 21
  • 3
0

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.

Aaron
  • 1,733
  • 4
  • 25
  • 31