Zmuszanie slajdów do pozostania na szczycie kontenera

Question

To jest trochę trudne do wyjaśnienia, ale dam mu szansę. Używam samouczka z suwakiem (http://css-tricks.com/slider-with-sliding-backgrounds/), aby utworzyć formularz kroku.

Działa to doskonale i wszystkie, ale mam mały problem, mam sekcję do przesyłania zdjęć (duże obrazy tła) i nie zmieniam rozmiaru.

Ponieważ ta sekcja przesyłania znajduje się na górze pierwszego slajdu, po przesłaniu obrazu powoduje przesunięcie drugiego i trzeciego slajdu w dół. Czy istnieje sposób, aby inne slajdy (2 & 3) pozostały u góry niezależnie od tego, co zrobiono na pierwszym slajdzie?

Szybki schemat, który pomoże ci lepiej wyjaśnić, o czym mówię.

Ps: Podążam tą samą semantyką co w tutorialu. np .. id użytkownika, zajęcia itp

Answer 1

Można to zrobić poprzez przechowywanie oryginalnego .offset() użyciu .data() tak:

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

dokonała następujących zmian do kodu HTML, co sprawiło, że pracować 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

Należy użyć <div class="slide" /> jak owinięcie wokół wszystkiego, co chcesz w pierwszym slajdzie. W ten sposób narzędzie do przesyłania plików na pierwszym slajdzie nie wpłynie na pozostałe dwa.

Oto fixed JSFiddle!

Answer 4

Problemem jest to, że div automatycznie zajmują całą szerokość ich kontenera, a oni ponownie elementy blokowe, więc układają się.

Aby to działało, należy zawinąć przesyłającego i pierwszy slajd we własnym, oddzielnym elemencie div, tak aby szerokość była ograniczona i nie wpłynęły na inne slajdy.

<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 zostanie zmodyfikowany tak, aby wyglądać tak:

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

skrzypcach: http://jsfiddle.net/PjxzH/