Question

我想使用Slick轮播和一些根据屏幕宽度调整大小的图像，但是当图像响应时，轮播总是填满整个页面。

这是我的代码：

HTML：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css"> 
        <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
        <div class="slide">
            <div><img src="images/slide1.jpg"/></div>
            <div><img src="images/slide2.jpg"/></div>
            <div><img src="images/slide3.jpg"/></div>
        </div>


    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
       <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="slick/slick.min.js"></script>

    </body>        
</html>

JS：

$(document).ready(function(){
  $('.slide').slick({
      dots: true,
  });

});

CSS：

.slide{ 

}

img{
    max-width: 50%;
    height: auto;
}

我尝试过使用.slide课程，但我似乎无法让它工作。

Answer 1

你必须强制光滑调整大小：

$(window).resize(function() {
  $('.js-slider').slick('resize');
});

$(window).on('orientationchange', function() {
  $('.js-slider').slick('resize');
});

或者这可能更短：

$(window).on('resize orientationchange', function() {
  $('.js-slider').slick('resize');
});

光滑的轮播不适应响应式图像

1 个答案: