使用 jquery 滑动 - 一个元素高于第二个

Question

我有三个 html “幻灯片”（就像在演示文稿中一样）和切换器，它们可以切换它们。

好模型情况：

1. 第一张幻灯片可见
2. 切换到第二张幻灯片
3. 第一张幻灯片滑出页面的左边缘
4. 新幻灯片（秒）在第一张幻灯片后立即从右侧滑到页面（假设幻灯片的边缘相互接触）

我的代码得到了什么

1. 第一张幻灯片可见
2. 切换到第二张幻灯片
3. 第一张幻灯片滑出页面的左边缘
4. 新幻灯片（秒）从右侧滑动，但在第一张幻灯片下方。第一张幻灯片的左下角与第二张幻灯片的右上角相接触。

我认为这可能是 CSS 问题，但我不知道如何解决它。我不想忘记代码的重要部分，so here is live preview。我正在谈论的部分在页面末尾。

Answer 1

1) 将 section div 包装在另一个容器中，例如 .myCarousel。

<div class="myCarousel">

  <section> 
    <!-- Slide 1 Content -->
  </section>
 <section> 
    <!-- Slide 2 Content -->
  </section>
  <section> 
    <!-- Slide 3 Content -->
  </section>

</div> <!-- End of .myCarousel-->

2) 为.myCarousel 提供以下 CSS：

.myCarousel{
  position:relative;
  min-height:1100px;
}

（最小高度取自您的标记。如果幻灯片的高度不同，请在单击轮播页面时使用 JavaScript 动态设置此高度）。

3) 您的幻灯片包含在 <section> 标记中，因此将以下内容添加到 section CSS 样式中：

section{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}  

问题在于 CSS 和创建幻灯片的非典型方式。看起来您正在使用 jQuery UI 幻灯片效果在幻灯片之间进行转换（我已经看到 jQuery animate 效果使用得更多）。这很好，但我们需要为轮播添加一些结构和一些样式，以确保幻灯片位于应有的位置。

告诉我进展如何。