Question

说明

我正在尝试将多行轮播（slick.js）居中，但它并不居中。正如您在下面的代码中看到的那样，我尝试使用.slick-slide{text-align: center !important;}并将Bootstrap的text-center - 与text-align: center相同 - 设置为轮播类，但仍然没有任何反应。< / p>

代码

您还可以在JSFiddle和"fullscreen mode"中看到它。

ps：最好全屏显示它。

$('.carousel').slick({
    infinite: true,
    arrows: false,
    dots: true,
    slidesPerRow: 3,
    rows: 3
});

.carousel-wrapper {
    background-color: rgb(235, 235, 235);
    position: relative;
}

img {
    background-color: black;
}

.slick-slide {
    text-align: center !important;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
</head>

<body>

    <section class="carousel-wrapper">
        <div class="container">
            <div class="row">

                <ul class="col-md-12 carousel text-center">
                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                    <li>
                        <a href="#">
                            <img class="img-responsive" src="http://www.onedlq.com/wp-content/themes/komodo/img/no-image-140.jpg" alt="">
                        </a>
                    </li>

                </ul>

            </div>
        </div>
    </section>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

</body>

</html>

提前致谢，
路易斯。

Answer 1

检查您的小提琴代码时，持有图像的“li”元素的宽度为33.33％，并填充容器，使其每行3“li”元素。话虽如此，其中的图像并没有填满他们父母33.33％的宽度。所以你需要将它们放在容器中心。您可以尝试以下代码。

.carousel-wrapper .slick-slide img{
   margin: 0 auto;
}

这仅适用于“.carousel-wrapper”容器中的光滑滑块

这可以修复点

.carousel-wrapper .slick-dots {
    left: 0;
    right: 0;
}

Answer 2

.slick-slide li a {
    display: inline-block;
}

添加此图像切片的中心，尤其是因为它们的大小固定且小于列表项宽度。这也为您提供了他们目前没有的锚标记布局。但是，你的导航点＆＃39;对比度也有点偏差，仅供参考。

编辑：添加此项解决了点对齐。

.slick-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

多行旋转木马居中

说明

代码

2 个答案: