Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
スライダーのプラグイン【Slick.js】のオプションについて、皆様のお知恵を借りたく質問させていただきます。
現在作成中のページにおいて、サムネイル付きの状態でSlickを実装した際、
下記のように、メインの画像の表示領域の手前側（画像よりもz-index値が大きい）で、
テキストを固定表示させたいと考えております。
テキストは変化させず、メインに表示される画像のみ入れ替わるようにしたいと考えております。
Slickでキャプションをつける方法として、スライドする画像要素を<div>で囲み、
その<div>の中に<p>タグで入れる、との表記がネットにあったのですが、
サムネイルとの連動を考慮すると、画像要素を<div>で囲むと、Sliclオプションの
asNavForが効かなくなってしまい、現在リストタグで入れてあります。
レスポンシブを考えた上で、狭まった時にサムネイルを横並びにしてメイン画像の下に回り込ませ（ここはまだ施していません）。その下に固定していたテキストを移動させて表示させたいと考えており、
メイン画像エリアのテキストを**<section id="top_main_text">、移動後のテキストをスライダーと同セクション内に<div class="explain_detail_out">として入れ、のちにメディアクエリで振り分けようと考えております。
そして<section id="top_main_text">**の位置をpositionで制御しようと考えたのですが、うまくいきません。
力技でテキストの位置を決めていくべきか、するならどの様な方法があるのか、
はたまた全然違うスマートな方法でキャプションの固定表示がおこなえるのか、
もしご存知の方がいらっしゃいましたら、ご教示願いたく思います。
下記ソースとなります。何卒よろしくお願い致します。
HTMLここから--------------------------------
<head> </head> <body> <header> </header> <main> <section id="top_main"> <ul class="slick"> <li><img src="../img/works_detail/works_onishi/01.jpg"> </li> <li><img src="../img/works_detail/works_onishi/02.jpg"></li> <li><img src="../img/works_detail/works_onishi/03.jpg"></li> <li><img src="../img/works_detail/works_onishi/04.jpg"></li> <li><img src="../img/works_detail/works_onishi/05.jpg"></li> <li><img src="../img/works_detail/works_onishi/06.jpg"></li> <li><img src="../img/works_detail/works_onishi/07.jpg"></li> <li><img src="../img/works_detail/works_onishi/08.jpg"></li> <li><img src="../img/works_detail/works_onishi/09.jpg"></li> <li><img src="../img/works_detail/works_onishi/onishi.jpg"></li> </ul> <ul class="thumbnail"> <li><img src="../img/works_detail/works_onishi/01.jpg"></li> <li><img src="../img/works_detail/works_onishi/02.jpg"></li> <li><img src="../img/works_detail/works_onishi/03.jpg"></li> <li><img src="../img/works_detail/works_onishi/04.jpg"></li> <li><img src="../img/works_detail/works_onishi/05.jpg"></li> <li><img src="../img/works_detail/works_onishi/06.jpg"></li> <li><img src="../img/works_detail/works_onishi/07.jpg"></li> <li><img src="../img/works_detail/works_onishi/08.jpg"></li><h1></h1> <li><img src="../img/works_detail/works_onishi/09.jpg"></li> <li><img src="../img/works_detail/works_onishi/onishi.jpg"></li> </ul> <div class="explain_detail_out"> <span class="explain_tittle_out"> <h1>Afford of Life</h1> <h2>YOKOHAMA</h2> </span> <span class="explain_spec_out"> 所在地：神奈川県横浜市港北区<br> 主要用途：専用住宅<br> 家族構成：夫婦＋子供１人<br> 構造：木造軸組工法<br> 設計期間：2013年９月〜2014年３月<br> 施工期間：2014年３月〜７月<br> 延床面積：98.94㎡<br> </span> </div> </section> <section id="top_main_text"> <div class="explain_tittle_in"> <h1>Afford of Life</h1> <h2>YOKOHAMA</h2> </div> <div class="explain_spec_in"> 所在地：神奈川県横浜市港北区<br> 主要用途：専用住宅<br> 家族構成：夫婦＋子供１人<br> 構造：木造軸組工法<br> 設計期間：2013年９月〜2014年３月<br> 施工期間：2014年３月〜７月<br> 延床面積：98.94㎡<br> </div> </section> </main> <footer> Copyright©ninite Ltd. All Rights Reserved. </footer> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script> <script src="../js/slick.js"></script> <script> $('.slick').slick({ asNavFor:'.thumbnail', arrows: false, slidesToShow:1, autoplay:true, autoplaySpeed:5000, centerMode:true, fade:true, infinite:true, }); </script> <script> $('.thumbnail').slick({ vertical:true, autoplay:false, arrows:false, slidesToShow:3, asNavFor:'.slick', focusOnSelect: true, centerMode:false, responsive:[ { breakpoint: 900, //767px以下のサイズに適用 settings: { slidesToShow:3, centerMode:true, } }, { breakpoint: 600, //767px以下のサイズに適用 settings: { slidesToShow:2, } }], }); </script>htmlここまで---------------------------
cssここから---------------------------
/トップスライダーここから/
#top_main{
margin-top:70px;
width: 100%;
height:auto;
display: flex;
flex-direction: row;
}
ul.slick{
position: relative;
width: 73.5%;
height:auto;
margin:0;
display: inherit;
}
ul.thumbnail{
position:relative;
width:24.5%;
height:auto;
margin-left: 2%;
}
ul.slick li{
width: 100%;
height:auto;
margin:0;
position:relative;
}
ul.thumbnail li{
position: relative;
width: 100%;
height: auto;
margin: 0;
}
ul.slick li img, ul.thumbnail li img{
width:100%;
height:auto;
vertical-align:middle;
}
/*トップスライダーここまで*/ /*explainここから*/ #top_main_text{ position:fixed; top:120px; left: 0; width: 73.5%; height:auto; margin:0; z-index: 600; } .explain_tittle_in{ display: inline-block; position:relative; left: 0px; top: 120px; max-width:360px; height:auto; z-index: 600; background-color: rgba(255,255,255,0.4); padding: 20px 100px 20px 60px; z-index: 600; } .explain_tittle_in h1, .explain_tittle_out h1{ font-family:"A P-OTF A1ゴシック Std B"; font-size:48px; } .explain_tittle_in h2, .explain_tittle_out h2{ font-family:"A P-OTF A1ゴシック Std B"; font-size:22px; } .explain_spec_in{ display: inline-block; position:relative; right: 0; bottom: 0; padding: 20px 30px 20px 20px; background-color: rgba(255,255,255,0.4); z-index: 600;
}
.explain_detail_out{
display: none;
}
/* .explain_spec_out{
display: inline-block;
position:relative;
right: 0;
bottom: 0;
padding: 20px 30px 20px 20px;
background-color: rgba(255,255,255,0.4);
z-index: 600;
}
*/
/explainここまで/
cssここまで-----------------------------
※字数の関係で、関係するエリアのみの記載となります。
何卒よろしくお願い致します。
あなたの回答
tips
プレビュー
