Question

我正在尝试设置Flickity轮播。它可以正常工作，但是在较小的屏幕上无法调整图像大小。刚刚被切断。

我尝试将图像的宽度设为100％。在HTML和CSS中。那使图像完全消失了。我尝试将图像插入HTML端，也作为CSS的背景插入。没有任何改变。我想念什么？任何帮助表示赞赏。

这是我的更新HTML代码。包括我头脑中的轻柔链接。

  <head>
     <link rel="stylesheet" href="flickity-docs/flickity.min.css" media="screen">
     <script src="flickity-docs/flickity.pkgd.min.js"></script>
    </head>



  <div class="main-carousel" data-flickity='{ "cellAlign": "left", "lazyLoad": true, "wrapAround": true, "autoPlay": true, "autoPlay": 6500}'>
          <div class="carousel-cell"><img class="carousel-cell-image" data-flickity-lazyLoad="images/photos/natchez-trace-parkway1-CROPPED.jpg" /> </div>
          <div class="carousel-cell"><img class="carousel-cell-image" data-flickity-lazyLoad="images/photos/waterskiing.jpg" /> </div>
          <div class="carousel-cell"><img class="carousel-cell-image" data-flickity-lazyLoad="images/photos/retire.jpg" /> </div>
    </div>

Answer 1

尝试以下操作：在您的第一个具有data-flickity对象的div中；添加此属性： "resize": true如果不起作用，则使用图像为每个div声明data-flickity并将该图像设置为data-flickity-lazyload。参见here for more examples

轻拂图像无法调整大小，它们会被剪切

1 个答案: