如何添加空格之间的光滑旋转木马项目

小开

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!!!

小开

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

小开

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.

小开

最佳答案

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

小开

  /* 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)

小开

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

小开

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

小开

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

小开

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.

小开

Just fix css:

/* the slides */
.slick-slider {
overflow: hidden;
}
/* the parent */
.slick-list {
margin: 0 -9px;
}
/* item */
.item{
padding: 0 9px;
}

小开

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

小开

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.

小开

simply add padding on to the slick-side class will do

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

小开

This approach works with the latest version of react-slick:

  .slick-list {
margin: 0 -7px !important;
}
  

.slick-slide > div {
padding: 0 7px !important;
}

小开

.slick-slide {
margin: 0 10px;
}
.slick-list {
margin: 0 -10px;
}

小开

screen screen
data-sm, data-md, data-lg, data-xl, data-xxl and for default screen size data-default

To space between items use space=10, Here 10 is size in "em"

eg: I have setting space from small to medium screen 2, and from large to extra large screen I am setting space 5 data-default="[space=2]" data-xl="[space=5]"

Note: data-default="[space=1]" these attribute should be set in "your-slick-slider-class" only

Javascript code

function slickSpacing(space, self){
self.find('.slick-slide').css({
marginLeft: space + 'em',
marginRight: space + 'em'
});
self.find('.slick-list').css({
marginLeft: -space + 'em',
marginRight: -space/2 + 'em'
});
}
function slickSlider(){
$('.slick-slider').each(function () {
var self = $(this);
// var screenSize = String(self.attr('data-md')).match(/screen=([0-9]+)/);
var spaceDefaultSize = String(self.attr('data-default')).match(/space=([0-9]+)/);
var spaceSmSize = String(self.attr('data-sm')).match(/space=([0-9]+)/);
var spaceMdSize = String(self.attr('data-md')).match(/space=([0-9]+)/);
var spaceLgSize = String(self.attr('data-lg')).match(/space=([0-9]+)/);
var spaceXlSize = String(self.attr('data-xl')).match(/space=([0-9]+)/);
var spaceXxlSize = String(self.attr('data-xxl')).match(/space=([0-9]+)/);
if(String(spaceDefaultSize) !== "null"){
if($(window).innerWidth() >= 0){
slickSpacing(spaceDefaultSize[1], self)
}
}
if(String(spaceSmSize) !== "null"){
if($(window).innerWidth() >= 576){
slickSpacing(spaceSmSize[1], self)
}
}
if(String(spaceMdSize) !== "null"){
if($(window).innerWidth() >= 768){
slickSpacing(spaceMdSize[1], self)
}
}
if(String(spaceLgSize) !== "null"){
if($(window).innerWidth() >= 992){
slickSpacing(spaceLgSize[1], self)
}
}
if(String(spaceXlSize) !== "null"){
if($(window).innerWidth() >= 1200){
slickSpacing(spaceXlSize[1], self)
}
}
if(String(spaceXxlSize) !== "null"){
if($(window).innerWidth() >= 1400){
slickSpacing(spaceXxlSize[1], self)
}
}
});
}
$(window).on('resize load', function(){
slickSlider();
});

HTML Code

<div class="service-slider overflow-hidden" data-default="[space=1]" data-xl="[space=5]">
<div></div>
<div></div>
<div></div>
</div>

小开

You can fake it by adding a border to the slide items. Not by overriding Slick Slider styles, but by adding the border to the elements that you created that will get converted to the slider. Something like this:

.my-slide-element {
&:not(:first-child):not(:last-child) {
border-left: 2px solid white;
border-right: 2px solid white;
}


&:first-child {
border-right: 4px solid white;
}


&:last-child {
border-left: 4px solid white;
}
}