How add spaces between Slick carousel item
JqueryHtmlCssJquery Pluginsslick.jsJquery Problem Overview
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).
$('.single-item').slick({
initialSlide: 3,
infinite: false
});
.slick-slider {
margin:0 -15px;
}
.slick-slide {
padding:10px;
background-color:red;
text-align:center;
margin-right:15px;
margin-left:15px;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<link href="http://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-12" style="background-color:gray;">
<div class="slider single-item" style="background:yellow">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
</div>
</div>
Somehow I am getting space from both side, I am trying to remove that.
Jquery Solutions
Solution 1 - Jquery
/* 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)
Solution 2 - Jquery
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>div {padding: 0 5px;}
Solution 3 - Jquery
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
.
Solution 4 - Jquery
@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;
}
Solution 5 - Jquery
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.
Solution 6 - Jquery
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 & margin from both sides( This should be your actual wrapper size )
-
Done
Solution 7 - Jquery
Just fix css:
/* the slides */
.slick-slider {
overflow: hidden;
}
/* the parent */
.slick-list {
margin: 0 -9px;
}
/* item */
.item{
padding: 0 9px;
}
Solution 8 - Jquery
simply add padding on to the slick-side class will do
.slick-slider .slick-slide {
padding: 0 15px;
}
Solution 9 - Jquery
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
});
Solution 10 - Jquery
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'
})
});
Solution 11 - Jquery
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
Solution 12 - Jquery
Try to use pseudo classes like :first-child & :last-child to remove extra padding from first & last child.
Inspect the generated code of slick slider & try to remove padding on that.
Hope, it'll help!!!
Solution 13 - Jquery
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.
Solution 14 - Jquery
This approach works with the latest version of react-slick:
.slick-list {
margin: 0 -7px !important;
}
.slick-slide > div {
padding: 0 7px !important;
}
Solution 15 - Jquery
Solution 16 - Jquery
.slick-slide > div {
margin: 0 10px;
}
.slick-list {
margin: 0 -10px;
}