前提・実現したいこと
スライドショープラグインのslickを使用して背景としてフルスクリーン表示しています。
PCだと問題ないのですが、スマホで見た際に下部メニューバーの高さまで写真が表示されてしまいます。
このメニューバーを含めずスライドショーを表示したいのです。
下記サイトは動画ですがフルスクリーンのイメージです。
http://www.greenpacks-corp.com/
javascriptなど無知のため詳しい方教えていただければ幸いです。
追記
コードも書かず失礼しました。改めてよろしくお願いします。
スマホ閲覧時にスライドショー部分をスクロールした際、下部にアドレスバー分の余白が空いてしまいます。
html
1<div class="slider"> 2<div><div class="item1 thum"></div></div> 3<div><div class="item2 thum"></div></div> 4</div>
CSS
1.slider {position:relative;z-index:0;width:100vw;height:100vh;} 2.slider .thum{position:relative;overflow:hidden;width:100vw; height:100vh; margin:auto;background-repeat:no-repeat;object-fit:cover;} 3.slider .item1{background-image:url(../img/1.jpg);background-position:center center;background-size:cover;} 4.slider .item2{background-image:url(../img/2.jpg);background-position:center center;background-size:cover;}
jQuery
1$('.slider').slick({ 2 autoplay: true, 3 speed: 2300, 4 dots: true, 5 fade: true, 6 swipeToSlide: true, 7 infinite: true, 8 arrows: false 9}); 10 11var sliderArea = $('.slider'); 12var sliderH = window.innerHeight ? window.innerHeight: $(window).height(); 13$(window).on('load resize', function(){ 14 sliderH = window.innerHeight ? window.innerHeight: $(window).height(); 15 sliderArea.css({'height':sliderH}); 16});
回答2件
あなたの回答
tips
プレビュー