jquery - AnytingSlider expand and resizecontents 一起将幻灯片高度降低到 2px

Question

如果我尝试同时使用 AnytingSlider expand 和 resizecontents 它会将幻灯片高度降低到 2px 没有resizecontent 真正的幻灯片正确显示。我在 CSS 中设置了高度，并查看了 js，但不知道为什么会这样

CSS

#slider1 {
    width: 700px;
    height: 280px;
    list-style: none;
    overflow-y: auto;
    overflow-x: hidden;
}


body
....
<div class="box">
  <div id="banner-full">
    <div id="page-wrap">
       <div id="hover">
         //...some hover over slider...//
       </div>
       <div class="anythingSlider anythingSlider-metallic activeSlider" style="width: 617px; height: 2px;">
          <div class="anythingWindow" style="width: 100%; height: 100%;">
            <ul id="slider1" class="anythingBase horizontal" style="width: 3085px; left: -617px;">
              <li class="cloned panel" style="width: 617px; height: 2px;">
              <li class="panel activePage" style="width: 617px; height: 2px;">
              <li class="panel" style="width: 617px; height: 2px;">
              <li class="panel" style="width: 617px; height: 2px;">
              <li class="cloned panel" style="width: 617px; height: 2px;">
            </ul>
          </div>
        <div class="anythingControls" style="display: block;">
            //...some controls html...//
        </div>
      </div>
    </div>
  </div>
</div>
....

Answer 1

如果您使用该expand选项，

$('#slider').anythingSlider({
    expand: true
});

您需要将滑块包装在不是文档正文（demo）的元素中：

<div class="wrapper">
    <ul id="slider">
        <li><img src="http://placekitten.com/500/200" alt="" /></li>
        <li><img src="http://placehold.it/500x200" alt="" /></li>
        <li><img src="http://placebear.com/500/200" alt="" /></li>
        <li><img src="http://lorempixel.com/500/200" alt="" /></li>
        <li><img src="http://placedog.com/500/200" alt="" /></li>
    </ul>
</div>

现在剩下的就是定义 的大小.wrapper：

.wrapper {
    width: 80%;
    height: 200px;
    margin: 20px auto;
}