Übergang für Inhalt ändern Position nach Schieberegler mit verschiedenen Höhen

Question

Ich habe einen Schieberegler mit Dias von verschiedenen Höhen. Als Nebeneffekt "springt" der Inhalt nach dem Schieberegler bei jedem Folienwechsel nach oben und unten. Hier ist meine Frage: Wie kann ich den Inhalt erreichen, nachdem der Schieberegler in die richtige Position verschoben wurde, wenn der Schieberegler seine Höhe ändert? Ich spielte mit der CSS-Übergangseigenschaft herum, aber ohne Erfolg.

Um zu zeigen, was auf das ich bin mit dem Ziel, hier ist ein Link zu einem der Seiten von Apple, die es genau richtig gemacht hat: http://www.apple.com/tvos/

Answer 1

Grundsätzlich haben Sie dieses Layout:

<slider></slider> 
<rest-of-content></rest-of-content> 

Obwohl, in der Tat ändert sich die Position von <rest-of-content> in der Seite, wenn <slider> Höhe geändert wird, gibt es nichts können Sie bei <rest-of-content> ändern, um es reibungslos zu springen. Sie müssen die height Eigenschaft von <slider> reibungslos ändern, und automatisch alles andere, das es in DOM nachfolgt, ändert auch Position glatt.

Das Animieren der height Eigenschaft Ihres Schiebereglers hängt stark vom Schieberegler ab, den Sie verwenden, aber eine gute Anzahl von ihnen bietet die Möglichkeit, Änderungen in der Höhe nahtlos und sofort zu initialisieren. Ich befürworte es in keiner Weise, aber ich weiß sicher slick carousel hat diese Option. Scrollen Sie nach unten zum Abschnitt "Adaptive Höhe".

Natürlich können Sie den Schieberegler, den Sie jetzt verwenden, beibehalten und dessen Rückruf zum Einleiten eines Folienwechsels verwenden, die Höhe der neuen Folie abrufen und die Höhe des Schiebereglers animieren, damit sie mit der neuen übereinstimmt. Damit Ihr Inhalt nicht springt, möchten Sie möglicherweise einen Container für den gesamten Schieberegler mit overflow:hidden verwenden und bei jeder Änderung der Folie den Wert max-height dieses Containers ändern.

Hoffe das oben genannte macht Sinn und hilft Ihnen.