0

I'm struggling to achieve this, what I want is to the space between the items to be lower, I don't understand why each one is so tiny, I just need a eg. 10px margin between each, or 32% width each.

I already searched (https://github.com/kenwheeler/slick/issues/582, How add spaces between Slick carousel item), but none of them resolved my problem.

$('.slick-slider').slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: true,
  autoplay: true,
  autoplaySpeed: 3000,
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class='slick-slider text-center'>
    <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>1</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>2</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>3</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>4</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>5</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>6</h6>
      <a href="#">know more</a>
    </div>
  </div>
</div>
Hula Hula
  • 553
  • 8
  • 20

1 Answers1

0

I think it will work

$('.slick-main').slick({
  arrows: true,
    slidesToShow: 3,
   slidesToScroll: 3,
    autoplay: true,
    dots: true,
    autoplaySpeed:2500,
    speed: 500,
});
.inner-item{
  background: orange;
}
.item {
  padding: 0 5px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class='slick-main text-center'>
   <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>1</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>2</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>3</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>29 JAN 18</small>
      <h6>4</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>02 FEB 18</small>
      <h6>5</h6>
      <a href="#">know more</a>
    </div>
  </div>
  <div class="slick-slider item">
    <div class="inner-item text-left">
      <small>10 FEB 18</small>
      <h6>6</h6>
      <a href="#">know more</a>
    </div>
  </div>
</div>

Fiddle

Ram kumar
  • 3,152
  • 6
  • 32
  • 49