CODEWITHSUNDEEP
jqueryhtmlcssjquery-pluginsslick.js
Sopo
Sopo

Reputation: 1687

How add spaces between Slick carousel item

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).

enter image description here

    $('.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.

Upvotes: 112

Views: 361573

Answers (20)

Mohammad Noushad Siddiqi
Mohammad Noushad Siddiqi

Reputation: 1

For version 0.28 of react slick, this approach works:

.slick-slide {
    padding: 0 10px !important;
}

Upvotes: 0

NIKHIL CHANDRA ROY
NIKHIL CHANDRA ROY

Reputation: 1087

for me, this one help me.

 .slick-slide {
    margin-left: 5px!important;
    margin-right: 5px!important;
}
.slick-slider {
    padding-left: 5px;
    padding-right: 5px;
  }

Upvotes: 0

Bruno Ribeiro
Bruno Ribeiro

Reputation: 715

Nowadays, the gap property for flexbox has pretty decent support: https://caniuse.com/flexbox-gap

So you can use this:

.slick-track {
    display: flex;
    gap: 1rem;
}

It'll add space only between elements.

Upvotes: 9

Hoang Long
Hoang Long

Reputation: 329

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

Upvotes: 1

bprdev
bprdev

Reputation: 1048

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

Upvotes: 0

Mohammed Rashad
Mohammed Rashad

Reputation: 204

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>

Upvotes: 0

Dishan TD
Dishan TD

Reputation: 8748

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

Upvotes: 179

Pilot Tt
Pilot Tt

Reputation: 23

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

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

Upvotes: 0

Chhun Socheat
Chhun Socheat

Reputation: 102

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

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

Upvotes: 7

Orlandster
Orlandster

Reputation: 4868

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.

Upvotes: 16

ling
ling

Reputation: 10047

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.

Upvotes: 10

Sushil Thapa
Sushil Thapa

Reputation: 634

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

Upvotes: 34

Anh Hoai Vui Le
Anh Hoai Vui Le

Reputation: 51

Just fix css:

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

Upvotes: 5

M Jos
M Jos

Reputation: 69

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

Upvotes: 1

Pablo S G Pacheco
Pablo S G Pacheco

Reputation: 2600

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

Upvotes: 14

Krzysztof
Krzysztof

Reputation: 21

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

Upvotes: 1

Sopo
Sopo

Reputation: 1687

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

Upvotes: 8

Asaf David
Asaf David

Reputation: 3297

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.

Upvotes: 0

stanze
stanze

Reputation: 2480

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

Upvotes: 2

Manish Kumar
Manish Kumar

Reputation: 1176

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

Upvotes: 0

Related Questions