How add spaces between Slick carousel item

Question

I want to add space between two slick carousel items  but not want the space with padding  because it s reducing my element size and I don t want that       x000D   x000D          single-item   slick   x000D          initialSlide  3  x000D          infinite  false x000D          x000D   slick-slider   x000D      margin 0 -15px  x000D    x000D   slick-slide   x000D      padding 10px  x000D      background-color red  x000D      text-align center  x000D      margin-right 15px  x000D      margin-left 15px  x000D    x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  http   cdn jsdelivr net jquery slick 1 5 0 slick min js  gt  lt  script gt  x000D   lt link href  http   cdn jsdelivr net jquery slick 1 5 0 slick css  rel  stylesheet   gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt  x000D   lt div class  container  gt  x000D       lt div class  row  gt  x000D           lt div class  col-sm-12  style  background-color gray   gt  x000D               lt div class  slider single-item  style  background yellow  gt  x000D                   lt div gt 1 lt  div gt  x000D                   lt div gt 2 lt  div gt  x000D                   lt div gt 3 lt  div gt  x000D                   lt div gt 4 lt  div gt  x000D                   lt div gt 5 lt  div gt  x000D                   lt div gt 6 lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Somehow I am getting space from both side  I am trying to remove that

User · Answer

Add  centerPadding   0    Slider settings will look like       phase-slider-one   slick        centerMode  true       centerPadding   0        responsive    breakpoint  1024    breakpoint  600    breakpoint  480          Thank you

User · Answer

Just fix css      the slides     slick-slider       overflow  hidden       the parent     slick-list       margin  0 -9px       item       item      padding  0 9px

User · Answer

The slick-slide has inner wrapping div which you can use to create spacing between slides without breaking the design    slick-list  margin  0 -5px    slick-slide gt div  padding  0 5px

User · Answer

An improvement based on the post by Dishan TD  which removes the vertical margin as well        slick-slide      margin-left   15px      margin-right   15px          slick-list       margin-left  -15px      margin-right  -15px      pointer-events  none        Note  the pointer-events was necessary in my case  to be able to click on the left arrow

User · Answer

Dishan TD s answer works nice  but I m getting better results using only margin-left   And to make this clearer to everyone else  you have to pay attention to the both opposite numbers  27 and -27       the slides       slick-slide       margin-left 27px            the parent       slick-list       margin-left -27px

User · Answer

Since the latest versions you can simply add a margin to your slides    slick-slide     margin  0 20px      There s no need for any kind of negative margins  since slick s calculation is based on the elements outerHeight

User · Answer

For example  Add this data-attr to your primary slick div  data-space  7                           data-space    each function                              var  this     this                                space    this attr  data-space                                 slick-slide   css                               marginLeft   space    px                               marginRight   space    px                                                           slick-list   css                               marginLeft  - space    px                               marginRight  - space 2    px

User · Answer

Try to use pseudo classes like  first-child  amp   last-child to remove extra padding from first  amp  last child   Inspect the generated code of slick slider  amp  try to remove padding on that   Hope  it ll help

User · Answer

With the help of pseudo classes removed margins from first and last child  and used adaptive height true in the script  Try this fiddle  One more Demo       single-item   slick           initialSlide  3          infinite  false          adaptiveHeight  true

User · Answer

Yup  I have found the solution for dis issue    Create one slider box with extra width from both side  Which we can use to add item space from both sides    Create Inner Item Content with proper width  amp  margin from both sides  This should be your actual wrapper size   Done

User · Answer

If you want a bigger space between the slides   not to decrease the slide s width  it means you ll have to show less slides  In such case just add a setting to show less slides          single-item   slick         initialSlide  3        infinite  false        slidesToShow  3           Another option is to define a slide s width by css without setting to amount of slides to show

User · Answer

the slides       slick-slide       margin  0 27px           the parent       slick-list       margin  0 -27px        This problem reported as issue   582  on plugin s github  btw this solution mentioned there too   https   github com kenwheeler slick issues 582

User · Answer

simply add padding on to the slick-side class will do  slick-slider  slick-slide     padding  0 15px

[jquery] How add spaces between Slick carousel item

Examples related to jquery

Examples related to html

Examples related to css

Examples related to jquery-plugins

Examples related to slick.js