how can i set slide item margin ?

See original GitHub issue

I saw the code write this in mixins.helpers.initialize and line 30 var slideWidth = trackWidth / props.slidesToShow;

But i want add margin or padding on slidesItem rather than each mixed together like this: var slideWidth = (trackWidth+padding*2) / props.slidesToShow;

I saw the examples,every slides item not mixed together.

and however i can use css like padding:0 10px; to resolve it

Is there any options to set it?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

29reactions
srikanthbandarucommented, Sep 9, 2018

I fixed it using

.slick-slide {
  padding: 0 15px;
}

.slick-list {
  margin: 0 2em;
}
13reactions
ZeroCool-85commented, May 24, 2019

You dont need to set margins just set:

 .slick-slide {
         padding: 0 8px;
         box-sizing: border-box;
  }

padding-left/right depends on your centerPadding.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How add spaces between Slick carousel item - Stack Overflow
The slick-slide has inner wrapping div which you can use to create spacing between slides without breaking the design:
Read more >
Workaround for printing slides without white edges
Drag the slide image so it's slightly smaller than the full page. Check what the trailing margin on your printer is, and make...
Read more >
regular slick slide margin Code Example
Queries related to “regular slick slide margin” · slick slider gap between slides · slick slider margin between slides · how to create...
Read more >
Add space between carousel items in react-slick - Clue Mediator
Solutions: ; slick · slide > div { ; margin: 0 10px; ; slick · list {.
Read more >
slick 기본 margin - CodePen
<div class="slider">. 9. <div class="item">. 10. <div class="back-con">. 11. <div class="back" style="background-color:red;"></div>.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found