私は欲しいものをやり遂げる方法を見つけようと苦労しているので、私が望むものを説明し、私の問題を示すコードペンを提供すると思いました。私が欲しいものレイヤードイメージをブートストラップ4ベータカルーセル
:
真ん中の上に挟む様々なスライド、静的なイメージを持っているカルーセル。 3つのレイヤーを考えてみましょう.1つはbg、2つは中央のモデル(モデル)、3つはフォアグラウンド要素です。私はスライドにbgとfgを入れておきたいが、モデルは動かないようにしたい。スライドは動くので、基本的に背景と前景の要素のみが変更されます。
問題:
Iは、zインデックスの階層に精通していないよので、私は私が望むものを達成するかどうかはわかりません。スライダでは2番目のレイヤを親要素に分割してスライド間でアニメートしないようにする必要があるため、スライドが来るとコンテナに応じてレイヤーが作成されますが、の背後にはのままです。私は私の人生の間、各スライドの要素の間にモデルをどうやって得るかを考え出すことはできません。
例:
コード:
HTML
<div class="container">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<img id="model" class="index-2" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338828/Glenna_bmvvk9.png" alt="Model middle layer">
<div class="carousel-item active">
<img class="d-block w-100 index-1" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338834/KingKong_1_zmwsmu.jpg" alt="First slide bottom layer">
<img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338836/KingKong_2_g3bdhd.png" alt="First slide top layer">
</div>
<div class="carousel-item">
<img class="d-block w-100 index-1" src="http://res.cloudinary.com/jrhager84/image/upload/v1505338843/SantaWindow_1_xeaojc.jpg" alt="Second slide">
<img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338864/SantaWindow_2_rvskzc.png" alt="Second slide top layer">
</div>
<div class="carousel-item">
<img class="d-block w-100 index-1" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338831/Mario_1_doib9k.jpg" alt="Third slide">
<img class="d-block w-100 index-3" src="https://res.cloudinary.com/jrhager84/image/upload/v1505338829/Mario_2_gp2fhj.png" alt="Third slide top layer">
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
CSS
.carousel {
background-color: #efefef;
}
.index-1 {
z-index: 1 !important;
}
.index-2 {
z-index: 2 !important;
}
.index-3 {
z-index: 300 !important;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#model {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
ご協力いただきありがとうございます。私がこれに追加できるものがあれば、回答を促すために役立つものがあれば教えてください。^_^
、私も気にしませんでした〜とコントロール。私はそれを修正するつもりです。 同じ要素を持つことに関して。しかし、各スライドからモデルをアニメートしないのですか?スライドアニメーション中でも、モデル全体に時間を置いておきたいです。 –
それは本当ですが、あなたのZ-Indexesが正しく設定されているので、あなたのHTMLレイアウトと関係があると思います。あなたが試みることができるのは、2つのスライダ(背景用、1つは前景用、もう1つはその間のモデル画像)で、すべてが親divにラップされてスライダと画像が整列します。 – NoNickAvailable
何かのように: