<div class="container">
<section class="js-slider">
<div class="slide">
<img src="https://via.placeholder.com/350x300?text=1" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x300?text=2" />
</div>
<div class="slide">
<img src="https://via.placeholder.com/350x300?text=3" />
</div>
</section>
</div>.container {
display: flex;
justify-content: center;
}
.js-slider {
max-width: 400px;
& > .slide:not(:first-child) {
display: none;
}
}$(window).on("load", function () {
$(".js-slider").slick({
arrow: true,
dots: true
});
});
