html - Flexslider carousel = 图像在动画/css 期间似乎被切断 * 问题

Question

当 flexslider 轮播动画开始时，图像似乎被切断了。这个问题有没有可能出现在 flexslider.css 样式代码中？

完整的动画代码可以在这里找到:

JSFiddle

我在这里放了 flexslider.css 的部分代码，怀疑是问题所在。

.flexslider {
  width: 250px;
  height: 600px;
  background: black;

}

.slides {
  width: 100%;
  height:100%;
  padding:0;
  padding-left:30px;
}
.slide {
  width: 100%;
}

.slide img {
  width: 100%;
}


.col{
   float:right;

}
#side{
  width: 40%;
  margin-right: 150px;
  margin-top: 0px;
}

Answer 1

我可以在这里重现您的问题:http://codepen.io/anon/pen/akjzx

现在，我不确定是什么导致了这个问题，因为您无法获得现场演示。我建议使用以下 CSS 值。它应该为您的问题提供解决方案。

.slides {
    width: 100%;
    height: 100%;
    padding-left: -30px; /* Adjust this value; try a negative value */
}

我还建议在 Chrome 中右键单击图像并选择“检查元素”。这将帮助您调试 CSS 并可能确定导致图像关闭的原因。

特别地，你可以添加:

.flexslider .slides > li { padding-left: 0; }