光滑的滑块在弹性容器中不起作用

Posted 2023-03-06

【中文标题】光滑的滑块在弹性容器中不起作用

【英文标题】：Slick slider not working in a flex container

【发布时间】：2018-02-08 07:26:40

【问题描述】：

我正在尝试将光滑的轮播 (http://kenwheeler.github.io/slick/) 在列中垂直居中。所以我在列（光滑滑块的容器）上使用display: flex; align-items: center;，但它破坏了滑块。

所以我尝试使用绝对位置或使用 flexbox 使轮播居中，但它们都破坏了光滑的滑块。

我希望有人为此问题提供 css/js/jquery 解决方案:)

这里有一个问题：https://jsfiddle.net/victor_allegret/g3dsd78w/

（抱歉，我在向堆栈溢出 sn-p 添加 slick 时遇到问题）

HTML：

<div class='flex-container'>

 <div class='single-item'>

  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>

 </div>

</div>

CSS：

.flex-container 
 /* Using flexbox */
 display: flex;
 align-items: center;
 /*----*/
 margin: 0 auto;
 padding: 40px;
 height: 500px;
 width: 80%;
 color: #333;
 background: #419be0;


.slick-slide 
 text-align: center;
 color: #419be0;
 background: white;

JS：

$(".single-item").slick(
 dots: true
);

【参考方案1】：

像这样？ With absolute position.

.abs-container 
  position:absolute;

  height:140px;
  width:300px;
  top:50%;
  left:50%;
  margin:-70px 0 0 -150px;

  color: #333;
  background: #419be0;

And this with FlexBox.

.flex-container 
    position:absolute;
    top:0px;
    bottom:0px;
    width:100%;
    height:100%;

  /* Using flexbox */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: stretch;
    align-items: center;
  /*----*/

  color: #333;
  background: #419be0;

.flex-child 
    width: 300px;
    order: 0;
    flex: 0 1 auto;
    align-self: center;

HTML

<div class='flex-container'>
    <div class='flex-child'>
      <div class='single-item'>
      .
      .
      .

【讨论】：

我在使用 flexbox 和 position: absolute; top: 50% 时遇到了同样的问题。两者都打破了滑块我不知道为什么：/

您在我的回答中看到了编辑后的 ​​JSFiddle 吗？它似乎有效：jsfiddle.net/StepBaro/g3dsd78w/2

真的很抱歉，我尝试了您的解决方案，但没有在绝对包装器上添加高度和宽度。所以现在它工作了非常感谢！但我仍然想知道为什么它不能只在父级上使用 display: flex; align-items: center;？

@VictorAllegret 可能是因为插件引用了自己的容器来检索大小，“display: flex”失败。我们应该清楚插件的结构才能理解问题。

父元素上的

position: absoute; top: 0px; width:100%; height:100% 对我有用。向父级添加另一个祖先，至少有 position:relative 可以避免有条件的 top:0px 尊重弹性显示。