質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.49%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1875閲覧

「slick slider」のdisplay:none;を回避するにはどうしたら良いでしょうか?

k-katapashi

総合スコア18

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/14 11:12

前提・実現したいこと

シンプルなHTMLコーディングによるサイトを制作しています。
jQueryの「slick slider」を使って、以下のようなフローのトップページを作成したいのですが、実現できません。

1. クロスフェードによるスライドショーを表示(ブラウザ画面いっぱいの写真が2秒毎に切り替わるもの)
2. 「1」のスライドショーがフェードアウトする
3. スライドショー付きのトップページを表示する

該当のソースコード

html

1<div id="block01" class="container"> 2 <div class="image-crossfader"> 3 <div class="image-crossfader-inner"></div> 4 <div class="image-crossfader-inner"></div> 5 <div class="image-crossfader-inner"></div> 6 <div class="image-crossfader-inner"></div> 7 </div> 8</div> 9<body> 10 <div id="block02" class="container"> 11 <ul class="slider"> 12 <li><img src="hoge1.jpg"></li> 13 <li><img src="hoge2.jpg"></li> 14 <li><img src="hoge3.jpg"></li> 15 <li><img src="hoge4.jpg"></li> 16 </ul> 17 </div> 18 <script> 19 $('#block02').hide(); 20 setTimeout(function(){ 21 $('#block01').fadeOut(500); 22 setTimeout(function(){ 23 $('#block02').fadeIn(); 24 },500); 25 },8000); 26 </script> 27 <script> 28 $('.slider').slick({ 29 centerMode: true, 30 dots:true, 31 focusOnSelect:true, 32 }); 33 </script> 34 <script> 35 var elInner, duration, defaultIndex, switchImage; 36 elInner = document.getElementsByClassName('image-crossfader-inner'); 37 duration = 2000; 38 defaultIndex = 0; 39 switchImage = function(next) { 40 var current = next ? (next - 1) : elInner.length - 1; 41 elInner[current].classList.remove('is-visible'); 42 elInner[next].classList.add('is-visible'); 43 next = (++next < elInner.length) ? next : 4; 44 setTimeout(switchImage.bind(this, next), duration); 45 }; 46 window.onload = switchImage.bind(this, defaultIndex); 47 </script> 48</body> 49

試したこと

「slick slider」は、最初非表示にする場合、スライダーが表示されなくなるという現象が起こるようです。
参考 → slick.jsをモーダルなど、最初非表示のもので使うとき

公式で公開されている、
$('.your-element').slick('setPosition');
で解決できると仰っている方もいらっしゃいますが、記述方法が間違っているのか、成功しませんでした。
参考 → SLICK.JSを利用していて、初期状態をDISPLAY:NONE;にしたらレイアウト崩れる

とくに、クリックなどのトリガーが無いのですが、どこかを修正すれば実現できるようなものなのでしょうか?
また、似たようなしくみを別な方法で作ることはできるのでしょうか?
ご教示いただけますと幸いです。
宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

.sliderがautoplayでないなら、#block02を初期でhide()せずそのまま表示させておき、
上にもう一枚白いレイヤーを被せておけば実現したい表現は割と簡単に実現できるかと思いますが
それだと駄目でしょうか?

上から順に #block01 | 追加レイヤー | #block02 としておき、
時間差で#block01と追加レイヤーをフェードアウトさせていけば
結果的に最後の#block02がフェードインしてくるように見えるかと。

初期状態display:none;でも正常にスライダーを表示したいという、
根本的な問題は解決できてませんが、「やりたいことが実現できれば良い」ということなら
これでもいけるかな、と。

根本解決が出来なかった場合の代替手段として参考までに。。。

投稿2018/11/14 11:21

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

k-katapashi

2018/11/15 10:51

ご回答いただき、ありがとうございます。 仰る通り、全ブロックをレイヤー構造として考えて、「追加レイヤー」を差し込むみつつ、cssのz-indexでなんとか調整したところ、キレイなフェードを実現できました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問