Принуждение слайдов оставаться в верхней части контейнера
Это немного сложно объяснить, но я дам ему шанс. Я использую этот учебник слайдера (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/
Ps: Я следую той же семантике, что и в учебнике. например, id, классы и т.д.