Question

我尝试使用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>

在Firefox中，Flickity轮播没有正确调整幻灯片宽度

0 个答案: