<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="slider">
<div class="slick-slideshow__slide">
<h3>1</h3>
</div>
<div class="slick-slideshow__slide">
<h3>2</h3>
</div>
<div class="slick-slideshow__slide">
<h3>3</h3>
</div>
<div class="slick-slideshow__slide">
<h3>4</h3>
</div>
<div class="slick-slideshow__slide">
<h3>5</h3>
</div>
<div class="slick-slideshow__slide">
<h3>6</h3>
</div>
</div>
https://codepen.io/ehsantl/pen/QKGMoV
.slick-list {
padding-left: 0px!important; // half partial
}
/===products===
$('.products-slider').slick({
speed: 300,
arrows: true,
centerMode: true,
centerPadding: '100px',
slidesToShow: 3,
prevArrow: $(".pp2"),
nextArrow: $(".nn2"),
slidesToScroll: 1,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
dots: false
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
centerMode: false,
centerPadding: '0px',
slidesToScroll: 1
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
centerMode: false,
centerPadding: '0px',
slidesToScroll: 1
}
}
]
});
