个人中心
gpt4 book ai didi

javascript - 光滑的旋转木马不适应响应式图像

转载 作者：行者123 更新时间：2023-11-28 15:04:41 25 4
gpt4 key购买 nike

我想将 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 类，但我似乎无法让它工作。

最佳答案

你必须强制 slick 来调整大小:

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

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

或者这可能更短:

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

关于javascript - 光滑的旋转木马不适应响应式图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49675761/

25 4 0
文章推荐： javascript - javascript中如何释放闭包的内存？
文章推荐： html - 如何更改折叠子元素的背景颜色并使其组合在一起？
文章推荐： javascript - Bootstrap4 对齐 self 基线不起作用
文章推荐： javascript - 如何使不透明度逐渐缩放
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com