强制幻灯片停留在其容器的顶部

Question

这有点难以解释，但我会试一试。我正在使用此滑块教程（http://css-tricks.com/slider-with-sliding-backgrounds/）来创建步骤表单。

它工作得很好，除了我有一个小问题，我有一个部分上传图片（大背景图片），我没有调整高度。

由于此上传部分位于第一张幻灯片的顶部，因此当我上传图片时，它会向下推动第二张和第三张幻灯片。无论第一张幻灯片做了什么，有没有办法让其他幻灯片（2＆amp; 3）保持在顶部？

快速图表，以帮助进一步解释我的目的。

Ps：我遵循与教程中使用的语义相同的语义。例如.. id，类等。

Answer 1

您可以使用.offset()存储原始.data()，如下所示：

Working Example

$('#slide-1').data('offset-top', $('#slide-1').offset().top); //store the initial offset top 

$('#add').click(function () { // click the button to add an image
    $('div.image-holder').html('<img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg" /> '); 

    $('#slide-1, #slide-2').offset({ // keep slides 1 and 2 in their original positions
        top: $('#slide-1').data('offset-top')
    });
});

Answer 2

对您的html进行了以下更改：DEMO

  <nav class="slider-nav">
    <a href="#slide-0" class="active">Slide 0</a> 
    <a href="#slide-1">Slide 1</a> 
    <a href="#slide-2">Slide 2</a> 
  </nav>

<div class="slider-wrap">
  <div class="image-holder">
     <img src="http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg"/> 
  </div>
  <div class="slider" id="slider">
    <div class="holder">
      <div class="slide" id="slide-0">

      </div>
      <div class="slide" id="slide-1"> 
       </div>
        <div class="slide" id="slide-2">

        </div>
    </div>
  </div>

</div>

Answer 3

您应该使用<div class="slide" />作为第一张幻灯片中所需内容的包装。这样，第一张幻灯片中的文件上传器不会影响其他两个。

这是一个fixed JSFiddle！

Answer 4

问题是div会自动占据容器的整个宽度，而且它们是块级元素，因此它们会叠加。

为了使这个工作，您需要将上传器和第一张幻灯片包装在他们自己的单独div中，以便宽度受到约束，并且它们不会影响其他幻灯片。

<div class="holder">
    <div class="first-slide-wrap">
        <div class="image-holder"></div>
        <div id="#slide-0"></div>
    </div>
    <div id="#slide-1"></div>
    <div id="#slide-2"></div>
</div>

CSS将被修改为如下所示：

.first-slide-wrap {
    float:left;
    width:300px;
}
.first-slide-wrap .slide {float:none;}

小提琴：http://jsfiddle.net/PjxzH/