1

我尝试使用flickity来制作一个好看的延迟加载图像轮播。它在 chrome 和 safari 上运行良好，但幻灯片的大小与 Firefox 中的图像不正确。

请尝试使用 Firefox 和其他浏览器的以下链接来了解这个想法：imagescroll

有谁知道如何在不失去可变幻灯片宽度的能力的情况下解决 Firefox 的问题？非常感谢！

<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/flickity@2.0/dist/flickity.css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">        
<style>
  * {box-sizing: border-box;}

  body { margin: 0; padding: 0;}

  .imgc {
         background-repeat: no-repeat;
         background-size: cover;
         height: 100%;
        }
  .carousel img {
         display: block;
         height: 100%;
         opacity: 0;
         transition: opacity 0.7s;
        }
.carousel img.flickity-lazyloaded {
         opacity: 1;
        }

</style>
<script src="https://unpkg.com/flickity@2.0/dist/flickity.pkgd.min.js"></script>
</head>
<body>

<!-- Flickity HTML init -->
<div class="carousel" data-flickity='{ "imagesLoaded": true, "percentPosition": false, "wrapAround":true,"draggable": true, "pageDots": false, "prevNextButtons": false,"setGallerySize": false,"lazyLoad":true,"lazyLoad": 1}'>
  <div class="imgc" style="background-image: url('static/room/image1_small.jpg')">
    <img src="static/room/image1_small.jpg" data-flickity-lazyload="static/room/comp/image1.jpg" alt="orange tree" />
  </div>
  <div class="imgc" style="background-image: url('static/room/image2_small.jpg')">
    <img src="static/room/image2_small.jpg" data-flickity-lazyload="static/room/comp/image2.jpg" alt="submerged" />
  </div>
  <div class="imgc" style="background-image: url('static/room/image3_small.jpg')">
    <img src="static/room/image3_small.jpg" data-flickity-lazyload="static/room/comp/image3.jpg" alt="look-out" />
  </div>
  <div class="imgc" style="background-image: url('static/room/image4_small.jpg')">
    <img src="static/room/image4_small.jpg" data-flickity-lazyload="static/room/comp/image4.jpg" alt="One World Trade" />
  </div>
  <div class="imgc" style="background-image: url('static/room/image5_small.jpg')">
    <img src="static/room/image5_small.jpg" data-flickity-lazyload="static/room/comp/image5.jpg" alt="drizzle" />
  </div>
  <div class="imgc" style="background-image: url('static/room/image6_small.jpg')">
    <img src="static/room/image6_small.jpg" data-flickity-lazyload="static/room/comp/image6.jpg" alt="cat nose" />
  </div>
</div>
</body>
</html>
4

0 回答 0