Slick Scroller JSカルーセルストレッチセンターdivでウィンドウ全体を埋める

私は説明できない問題に遭遇しています。私は3つのスライドを表示するスリックセットアップ、trueとdraggableにcenterModeを持っています。それは素晴らしい作品です。私は滑らかなスクロールのコンテナーdiv全体をモバイルビュー（480px以下またはその周辺のもの）で表示しないように設定してから、画像をブロックモードで中央に表示するだけです。しかし、私はSlick Scrollerをタブレット上のユーザーに見えるようにしたい。問題は、タブレットにページを読み込むときに、Slick Scrollカルーセルが最も中央のDiv（画像）のみを表示し、コンテナの幅いっぱいを満たさない場合、それを充填するために不均等に伸びてしまうという問題です。それでもまだスクロールしますが、その外観は大変です。私はこれを引き起こしていることを理解していない、デスクトップのウィンドウのサイズを変更しても何の問題も生じないからです。Slick Scroller JSカルーセルストレッチセンターdivでウィンドウ全体を埋める

ここは実際のサイトです。あなたが見ることができるように、それはブラウザ上でうまく動作しますが（しかし、あなたが望むサイズですが）、タブレットにロードすると画像がひずんで、コンバーターの幅が100％になるようにフォーカスが合っているようにしてください...

http://philippenewman.com/photography/

$(document).on('ready', function() { 
 
\t $(".variable").slick({ 
 
\t \t infinite: true, 
 
\t \t variableWidth: true, 
 
\t \t slidesToShow: 3, 
 
\t \t draggable: true, 
 
\t \t centerMode: true, 
 
\t \t swipeToSlide: true 
 
\t }); 
 
});

html, body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 
* { 
 
\t box-sizing: border-box; 
 
} 
 
.slider { 
 
\t width: 90%; 
 
\t margin: 0 auto; 
 
\t margin-top: 100px; 
 
} 
 
.slick-slide { 
 
\t margin: 0px 20px; 
 
} 
 
.slick-slide img { 
 
\t width: 100%; 
 
\t height: 700px; 
 
\t max-height: 80vh; 
 
} 
 
.slick-prev:before, .slick-next:before { 
 
\t color: white; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Slick Playground</title> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
<link rel="stylesheet" type="text/css" href="./css/slick/slick.css"> 
 
<link rel="stylesheet" type="text/css" href="./css/slick/slick-theme.css"> 
 

 
<!-- External Stylesheets--> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 

 
<!-- Bootstrap --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- External Stylesheets--> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 

 
<!-- Bootstrap --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Jquery--> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified Bootstrap JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<!-- Stylesheets--> 
 
<link rel="stylesheet" href="./css/style.css" type="text/css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<!-- Stylesheets--> 
 
<link rel="stylesheet" href="./css/style.css" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
<!--BEGIN NAVBAR--> 
 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-custom"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> 
 
     <a class="navbar-brand" href="index.html">philippe newman <span style="color:#99b3ff">photography</span></a> </div> 
 
    
 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Galleries <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="sanfrancisco.html">San Francisco</a></li> 
 
      <li><a href="#">California</a></li> 
 
      </ul> 
 
     </li> 
 
     <li> <a href="process_production.html">process + production</a> </li> 
 
     <li> <a href="contact.html">Contact</a> </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav> 
 
<!--END NAVBAR--> 
 

 
<!-- BEGIN MAIN CONTENT HERE--> 
 
<main class="main"> 
 
    
 
    <!--  This section is for large tablet/Desktop views--> 
 
    <section class="variable slider hidden-xs"> 
 
    <div> <img src="./images/photography/san_francisco/caltrain_lights_9_7_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/embarcadero_sunset_10_7_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/golden_gate_bridge_dusk_10_10_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/mission_st_alley_graffiti_san_francisco_8_26_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/metreon_sf_intersection_night_8_13_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/marshal_beach_sunset_second_10_19_2016.jps" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/cathedral_of_st_mary_san_francisco_7_20_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/sf_windmill_night_9_30_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/sutro_baths_sunset_second_shot_6_18_2016.jpg" class="img-responsive"> </div> 
 
    <div> <img src="./images/photography/san_francisco/seacliff_sunset_6_21_2016.jpg" class="img-responsive"> </div> 
 
    </section> 
 
    
 
    <!--  This section is for our mobile/tablet view only--> 
 
    <section class="mobile-gallery hidden-sm hidden-md hidden-lg"> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/caltrain_lights_9_7_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/embarcadero_sunset_10_7_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/golden_gate_bridge_dusk_10_10_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/mission_st_alley_graffiti_san_francisco_8_26_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/metreon_sf_intersection_night_8_13_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/marshal_beach_sunset_second_10_19_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/cathedral_of_st_mary_san_francisco_7_20_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/sf_windmill_night_9_30_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/sutro_baths_sunset_second_shot_6_18_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     <div class="col-xs-12 photo-row"> <img src="./images/photography/san_francisco/seacliff_sunset_6_21_2016_thumbnail.jpg" class="img-responsive center-block"> </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</main> 
 
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script> 
 
<!-- JS file for Slick Scroller carousel--> 
 
<script src="./js/slick/slick.js" type="text/javascript" charset="utf-8"></script> 
 
</body> 
 
</html>

fiddle link

出典

2016-11-13 Philippe Newman