Question

如果我尝试使用AnytingSlider扩展和调整内容，它会将幻灯片高度降低到2px 没有 resizecontent true 幻灯片正确显示。我已经在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;
}

AnytingSlider展开并调整内容大小，将幻灯片高度降低到2px

1 个答案: