Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 490
Sopo Avatar asked Jun 23 '15 09:06

Sopo


People also ask

How do you use slick slider Codepen?

You can also link to another Pen here (use the . css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.


1 Answers

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

like image 124
Dishan TD Avatar answered Sep 25 '22 18:09

Dishan TD