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.
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.
/* 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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With