slick.jsを使用して、TOPページスライダーを組み込んでいます
画像自体は綺麗に1ページ目、2ページ目とスライドされ表示されるのですが、
画像の上に表示したいDIV要素が、<li>タグ内にあるにも関わらず
2ページ目に重なって表示されてしまいます。
画像は<li>単位で表示できているのに、div要素がなぜ表示されてしまうのかがわかりません。
こちらの解決方法がどうしてもわからず質問させていただきました。
HTML
1 2<div class="slider-wrap" id="slider-wrap"> 3 <ul class="slider"> 4 <li> 5 <img src="/img/1x/mv-bg1.jpg"> 6 <div class="slider-font"> 7 <p class="slider-p1">1ページ目</p> 8 <h1 class="slider-title">1ページ目</h1> 9 <p class="slider-p2 button-p">1ページ目</p> 10 <p class="slider-p3 button-co">111</p> 11 </div> 12 </li> 13 14 <li> 15 <img src="/img/1x/mv-bg2.jpg"> 16 <div class="slider-font"> 17 <p class="slider-p1">2ページ目</p> 18 <h1 class="slider-title">2ページ目</h1> 19 <p class="slider-p2 button-p">2ページ目</p> 20 <p class="slider-p3 button-co">222</p> 21 </div> 22 </li> 23 </ul> 24</div> 25
CSS
1 2/*----- slider -----*/ 3.slider { 4 position: relative; 5} 6 7.slider img { 8 width: 100%; 9 height: 40vw; 10 object-fit: cover; 11 object-position: 100% 80%; 12} 13 14.slider li div { 15 position: absolute; 16 top: 0; 17 left: 0; 18 width: 100%; 19 height: 40vw; 20 display: flex; 21 flex-direction: column; 22 justify-content: center; 23 align-items: center; 24} 25 26.slider-font a { 27 color: #fff; 28} 29 30.slider-font p { 31 color: #fff; 32} 33 34.slider-font h1 { 35 color: #fff; 36 font-size: 48px; 37 margin-top: 6px; 38} 39 40.slider-p1 { 41 font-size: 14.5px; 42 font-weight: 600; 43} 44 45.slider-p2 { 46 margin-top: 64px; 47} 48 49.slider-p3 { 50 padding: 16px 45px; 51 font-size: 21px; 52} 53 54.slider-p3 span { 55 font-size: 12px; 56} 57 58.slider-wrap { 59 position: relative; 60} 61
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/13 23:53
2021/05/14 00:13