用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效果更多地使用了）。这很好，但是我们需要在旋转木马和一些样式中添加一些结构，以确保幻灯片在它们应该的位置。

让我知道它是怎么回事。