Принуждение слайдов оставаться в верхней части контейнера

Это немного сложно объяснить, но я дам ему шанс. Я использую этот учебник слайдера (http://css-tricks.com/slider-with-sliding-backgrounds/), чтобы создать форму шага.

Он работает отлично, и у меня есть небольшая проблема, у меня есть раздел для загрузки изображений (большие фоновые изображения), и я не изменяю размер.

Поскольку этот загрузочный раздел находится поверх первого слайда, когда я загружаю изображение, он сдвигает второе и третье слайды вниз. Есть ли способ сделать другие слайды (2 и 3) оставаться на вершине, независимо от того, что сделано для первого слайда?

Быстрая диаграмма, которая поможет объяснить, о чем я говорю.

Ps: Я следую той же семантике, что и в учебнике. например, id, классы и т.д.

Ответ 1

Вы можете сделать это, сохранив исходный . offset(), используя .data() так:

Рабочий пример

$('#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')
    });
});

Ответ 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>

Ответ 3

Вы должны использовать <div class="slide" /> в качестве обертки вокруг всего, что вы хотите в первом слайде. Таким образом, загрузчик файлов в первом слайде не будет влиять на другие два.

Здесь исправлено JSFiddle!

Ответ 4

Проблема заключается в том, что divs автоматически занимают всю ширину своего контейнера, и они являются элементами уровня блока, поэтому они складываются.

Чтобы сделать эту работу, вам нужно будет обернуть загрузчик и первый слайд в свой собственный отдельный 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/