When using slick slider and have slide with row which have 2 divs it becomes column with 2 divs. Bootstrap 4

Question

I need to make slider which have slide with row which have 2 divs in it. But when I try to use slick slider this row becomes column. Using Bootstrap 4 and flexbox.

My HTML:

<section class="main-slider">
    <div class="container-fluid sl">
        <div class="row slider-content justify-content-center align-items-lg-center">
            <div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3">
                <h1 class="main-slider-header top-header">We Believe</h1>
                <h1 class="main-slider-header bottom-header">in quality design</h1>
                <p class="slider-text top-text">Any creative project is unique</p>
                <p class="slider-text middle-text">and should be provided with</p>
                <p class="slider-text bottom-text">the appropriate quality</p>
                <a class="btn slider-btn" href="#">Order Now</a>
            </div>
            <div class="right-side text-center col-lg-8 col-xl-6">
                <ul class="row people-list justify-content-center">
                    <li><img class="img-fluid" src="images/main-slider-img-1.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-2.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-3.png"></li>
                    <li class="offset-lg-3 offset-xl-4"><img class="img-fluid" src="images/main-slider-img-4.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-5.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-6.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-7.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-8.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-9.png"></li>
                    <li class="col-xl-12"><img class="img-fluid " src="images/main-slider-img-10.png"></li>
                </ul>
            </div>
        </div>

        <div class="row slider-content justify-content-center align-items-lg-center">
            <div class="right-side text-center col-lg-8 col-xl-6">
                <ul class="row people-list justify-content-center">
                    <li><img class="img-fluid" src="images/main-slider-img-1.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-2.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-3.png"></li>
                    <li class="offset-lg-3 offset-xl-4"><img class="img-fluid" src="images/main-slider-img-4.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-5.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-6.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-7.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-8.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-9.png"></li>
                    <li class="col-xl-12"><img class="img-fluid " src="images/main-slider-img-10.png"></li>
                </ul>
            </div>

            <div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3">
                <h1 class="main-slider-header top-header">We Believe</h1>
                <h1 class="main-slider-header bottom-header">in quality design</h1>
                <p class="slider-text top-text">Any creative project is unique</p>
                <p class="slider-text middle-text">and should be provided with</p>
                <p class="slider-text bottom-text">the appropriate quality</p>
                <a class="btn slider-btn" href="#">Order Now</a>
            </div>
        </div>

        <div class="row slider-content justify-content-center align-items-lg-center">
            <div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3">
                <h1 class="main-slider-header top-header">We Believe</h1>
                <h1 class="main-slider-header bottom-header">in quality design</h1>
                <p class="slider-text top-text">Any creative project is unique</p>
                <p class="slider-text middle-text">and should be provided with</p>
                <p class="slider-text bottom-text">the appropriate quality</p>
                <a class="btn slider-btn" href="#">Order Now</a>
            </div>
            <div class="right-side text-center col-lg-8 col-xl-6">
                <ul class="row people-list justify-content-center">
                    <li><img class="img-fluid" src="images/main-slider-img-1.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-2.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-3.png"></li>
                    <li class="offset-lg-3 offset-xl-4"><img class="img-fluid" src="images/main-slider-img-4.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-5.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-6.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-7.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-8.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-9.png"></li>
                    <li class="col-xl-12"><img class="img-fluid " src="images/main-slider-img-10.png"></li>
                </ul>
            </div>
        </div>

        <div class="row slider-content justify-content-center align-items-lg-center">
            <div class="right-side text-center col-lg-8 col-xl-6">
                <ul class="row people-list justify-content-center">
                    <li><img class="img-fluid" src="images/main-slider-img-1.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-2.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-3.png"></li>
                    <li class="offset-lg-3 offset-xl-4"><img class="img-fluid" src="images/main-slider-img-4.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-5.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-6.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-7.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-8.png"></li>
                    <li><img class="img-fluid" src="images/main-slider-img-9.png"></li>
                    <li class="col-xl-12"><img class="img-fluid " src="images/main-slider-img-10.png"></li>
                </ul>
            </div>

            <div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3">
                <h1 class="main-slider-header top-header">We Believe</h1>
                <h1 class="main-slider-header bottom-header">in quality design</h1>
                <p class="slider-text top-text">Any creative project is unique</p>
                <p class="slider-text middle-text">and should be provided with</p>
                <p class="slider-text bottom-text">the appropriate quality</p>
                <a class="btn slider-btn" href="#">Order Now</a>
            </div>
        </div>
    </div>
</section>

Here how it looks without slick slider (correct):

Here how it looks with slick slider initialized (need to look like on the first screenshot):

Initializing slick slider:

$(document).ready(function(){
    $('.sl').slick({
});
});

Answer 1

The problem is that Slick carousel enforces some styles on the tags that has the .slider-content class, and in the meantime you are using these very same nodes as the Bootstrap .rows. In order to solve this, you should use separate tags in your markup for these two separate functionalities.

So basically you could have your markup outlined as below.

<section class="main-slider">
    <div class="container-fluid sl">
        <!-- Note that `.slider-content` wraps `.row` -->
        <div class="slider-content">
            <div class="row justify-content-center align-items-lg-center">
                <div class="left-side d-flex flex-column col-11 col-sm-7 col-md-5 col-lg-4 col-xl-3">
                    <!-- Text -->
                </div>
                <div class="right-side text-center col-lg-8 col-xl-6">
                    <!-- Images of people -->
                </div>
            </div>
        </div>

        <!-- …Other slides… -->
    </div>
</section>