Slick Carousel Demo

by Juan Muñoz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
  <div class='single-item'>
    <div><img src="http://www.puntocowork.cl/home/wp-content/uploads/2019/03/KTASTRO-300x300.jpg" alt=""/></div>
    <div><img src="https://www.puntocowork.cl/home/wp-content/uploads/2019/03/lacustre-300x300.jpg" alt=""/></div>
    <div><img src="https://www.puntocowork.cl/home/wp-content/uploads/2019/03/softnix-300x300.jpg" alt=""/></div>
    <div><img src="https://www.puntocowork.cl/home/wp-content/uploads/2019/03/convergente-300x300.jpg" alt=""/></div>
    <div><img src="https://www.puntocowork.cl/home/wp-content/uploads/2019/03/vigenco-300x300.jpg" alt=""/></div>
    <div><img src="https://www.puntocowork.cl/home/wp-content/uploads/2019/03/alavena-300x300.jpg " alt=""/></div>
    <div><img src="https://www.puntocowork.cl/home/wp-content/uploads/2019/03/greenpeace-300x300.jpg" alt=""/></div>
    <div><img src="https://www.puntocowork.cl/home/wp-content/uploads/2019/03/pedidos-ya-300x300.jpg" alt=""/></div>
  </div>

CSS

img {
  width:100px;
}
.container div{
  padding:1px 25px;
  display:flex;
}
.single-item{
  justify-content: center;
  align-items:center;
}
.slick-dots li button{
  color:white;
}

JavaScript

var settings = {
rows:1,
slidesPerRow: 1,
dots: true,
slidesToShow:4
}
$(".single-item").slick(settings);