Верстка slick slider на bootstrap4

Подскажите как верстают слайдеры на бутсрапе?

Нужно в бустрап 4 запихнуть slick slider. Структура кода следуйщая:

<section class="team">
    <div class="container">
      <div class="row team-slider text-center">

        <div class="col-xl-4">
          <div class="team__card">
            <div class="team__card-img">
              <img src="images/team/team1.jpg" alt="">
            </div>
            <div class="team__card-title">John Doe</div>
            <p class="team__card-text">Ceneral Manager</p>
          </div>
        </div>

        <div class="col-xl-4">
          <div class="team__card">
            <div class="team__card-img">
              <img src="images/team/team1.jpg" alt="">
            </div>
            <div class="team__card-title">John Doe</div>
            <p class="team__card-text">Ceneral Manager</p>
          </div>
        </div>

        <div class="col-xl-4">
          <div class="team__card">
            <div class="team__card-img">
              <img src="images/team/team1.jpg" alt="">
            </div>
            <div class="team__card-title">John Doe</div>
            <p class="team__card-text">Ceneral Manager</p>
          </div>
        </div>

        <div class="col-xl-4">
          <div class="team__card">
            <div class="team__card-img">
              <img src="images/team/team1.jpg" alt="">
            </div>
            <div class="team__card-title">John Doe</div>
            <p class="team__card-text">Ceneral Manager</p>
          </div>
        </div>
      </div>
    </div>
  </section>



$(function() {
    $('.team-slider').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3,
      });
});

Нужно отображать по 3 слайда одновременно. Как их правильно выравнивать по сетке?? Стили колонок col-xl-4 перебивают стили слайдера, и все отображается криво.