<section class="slider">
  <div class="x">slide1</div>
  <div class="x">slide2</div>
  <div class="x">slide3</div>
  <div class="x">slide4</div>
  <div class="x">slide5</div>
  <div class="x">slide6</div>
</section>

.slider {
    width: auto;
    margin: 30px 50px 50px;

.slick-slide {
    background: #3a8999;
    color: white;
    padding: 40px 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
}

.slick-prev:before,
.slick-next:before {
    color: black;
}

.slick-dots {
    bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: #e84a69;
}

.x {
  border: solid 2px black;
}

$(".slider").slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false
});