slick.jsスライドはモバイルでは反応しませんが、ウェブではOKです

Question

私は基本的な1スライドスライドショーのために滑らかに動こうとしています。

モバイル解像度まで細かくサイズ変更されますが、デフォルトでは画像のフルサイズになります。この場合、どちらが巨大ですか？私はCSSでさまざまなメディアのクエリで遊んだと何も役立つようだ。他のすべての修正をここでやってみましたが、喜びはありませんでした。

私はFYIのグリッドレイアウトを使用しています。

HTML

<div class="title"> 
    <div class="slider"> 
     <div class="slide1 title-text"> 
      Blah 1 
     </div> 
     <div class="slide2 title-text"> 
      blah 2 
     </div> 
    </div> 
</div> 

CSS

.title { 
    grid-area: title; 

} 

.slide1 { 
    background-image: url("http://www.toledomuseum.org/wordpress/wp-content/uploads/art_class_1200px_2.jpg"); 
    background-size: cover; 
    width: 100%; 
    max-width:300px; 
} 

.slide2 { 
    background-image: url("http://willkempartschool.com/wp-content/uploads/2016/08/adding-shadows-to-a-landscape-painting.jpg"); 
    background-size: cover; 
    max-width:300px; 
} 

jQueryの

$(document).ready(function(){  
    $('.slider').slick({ 
     fade: true, 
     autoplay: true, 
     autoplaySpeed: 2000, 
     arrows: false, 
     dots: true, 
     adaptiveHeight: true 
    }); 
}); 

Answer 1

まあ、私は正確になぜあなたを伝えることはできませんが、私はそれを修正したと思います。

私はメインのCSS3グリッドレイアウトに滑らかなためのHTMLを含めていましたが、うまくいきませんでした。カルーセルをグリッド外に移動したので、今は正常に動作しているようです。なぜ実際に知っている人から聞くのは素晴らしいことでしょう！