前提・実現したいこと
シンプルな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;にしたらレイアウト崩れる
とくに、クリックなどのトリガーが無いのですが、どこかを修正すれば実現できるようなものなのでしょうか?
また、似たようなしくみを別な方法で作ることはできるのでしょうか?
ご教示いただけますと幸いです。
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/15 10:51