Question

我需要制作有滑行的滑块，行中有2个div。但是，当我尝试使用光滑的滑块时，此行变为列。使用Bootstrap 4和flexbox。

我的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>

这里看起来如何没有光滑的滑块（正确）：

这里看起来如何使用光滑的滑块初始化（需要在第一个屏幕截图上看起来像）：

初始化光滑滑块：

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

Answer 1

问题是Slick轮播在具有.slider-content类的标签上强制执行某些样式，同时您使用这些与Bootstrap .row相同的节点。为了解决这个问题，您应该在标记中使用单独的标记来实现这两个独立的功能。

所以基本上你可以将你的标记概述如下。

<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>

当使用光滑滑块并且具有带有2个div的行的幻灯片时，它将成为具有2个div的列。 Bootstrap 4

1 个答案: