多排旋转木马居中
[英]Multiple rows carousel centering
问题描述
Explanation 
说明
I'm trying to center a multiple rows carousel ( slick.js ), but it doesn't center. 我正在尝试将多行轮播（ slick.js ） 居中放置 ，但不会居中。 As you can see in the code below, I tried to use .slick-slide{text-align: center !important;} and set Bootstrap's text-center - which is the same of text-align: center - to the carousel class, but still, nothing happens. 如下面的代码所示，我尝试使用.slick-slide{text-align: center !important;} ，并将Bootstrap的text-center （与text-align: center相同）设置为carousel类，但仍然没有任何反应。
Code 码
You can also see it in JSFiddle and in "fullscreen mode" . 您还可以在JSFiddle和“全屏模式”中查看它。
ps: it's be better to visualize it in fullscreen. 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>
Thanks in advance, 提前致谢，
Luiz. 路易斯。
2 个解决方案
解决方案1
1 2017-04-23 14:26:44
Reviewing your fiddle code, the width of the "li" element holding the images are 33.33% and that fills up the container making it 3 "li" elements per row. 查看您的小提琴代码，保存图像的“ li”元素的宽度为33.33％，这将填充容器，使其每行3个“ li”元素。 Having said that, the images in them do not fill up the 33.33% width of their parents. 话虽如此，其中的图像并未填充其父母的33.33％的宽度。 SO you need to center them in their containers. 因此，您需要将它们放在容器的中央。 You can try this code below. 您可以在下面尝试此代码。
.carousel-wrapper .slick-slide img{
margin: 0 auto;
}
This will be specific to only the slick slider in the ".carousel-wrapper" container 这仅适用于“ .carousel-wrapper”容器中的光滑滑块
This fixes the dots 修复点
.carousel-wrapper .slick-dots {
left: 0;
right: 0;
}
解决方案2
1 已采纳 2017-04-23 14:33:46
.slick-slide li a {
display: inline-block;
}
Add this centers your image tiles, especially since they are fixed size and smaller than the list item width. 将此设置为居中位置，尤其是由于它们的大小固定且小于列表项的宽度时，尤其如此。 This also gives your anchor tags 'layout', which they don't currently have. 这还会为锚标签提供“布局”，而它们目前没有。 However, your navigation dots' alignment is a little off as well, FYI. 但是，导航点的对齐方式也有些偏离，仅供参考。
EDIT: Add this solves the dot alignment. 编辑：添加此解决点对齐。
.slick-dots {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.