Question

我正在使用GlideJS来显示带有图片的轮播。我通过调用以下代码将此轮播加载到文件A （carousel-test.php）中：

<div id="carouselContainer"></div>
<script>
$( "#carouselContainer" ).load( "carousel.php" );
</script>

文件B （carousel.php）包含带有图片的轮播代码：

<div class="module module--horizontal">
  <div id="Carousel" class="glide">
    <div class="glide__wrapper">
      <ul class="glide__track">
        <li class="glide__slide">
          <div class="box" style="background-color: #77A7FB;">  
            <div>
              <img src="http://www.brussels.info/grand-place-brussels.jpg" style="width:100%; height:100%;" />
            </div>
          </div>
        </li>
        <li class="glide__slide">
          <div class="box" style="background-color: #FBCB43;">
            Second slide
          </div>
        </li>
      </ul>
   </div>
   <div class="glide__bullets"></div>
</div>

<script> var carousel = $('#Carousel').glide({ type: 'carousel', startAt: 1, touchDistance: 2, autoplay: 0, autoheight: true }); </script>

问题是当你第一次打开文件A （http://reistip.nl/carousel-test.php）时，旋转木马中图像的高度非常小。高度应为100％，而是固定为（约）20像素。一旦开始使用轮播，刷新页面或打开console.log，图像的高度会发生变化，变得应该是（100％）。

首次打开页面时，如何将轮播中图像的高度显示为100％？

（注意：要重现此问题，请确保在访问文件A 后在浏览器中打开新标签页，如果您只刷新文件A的页面问题不再出现了）

Answer 1

你不能通过100％来改变图像的高度，因为。图像高度已达到其高度的100％。如果你真的想要改变图像的高度，那么你应该用px值定义它，但我建议你不要改变高度，因为它会拉伸你的图像。相反，你可以为你的旋转木马包装添加一定的高度，并设置隐藏溢出。它将在包装器中显示图像，溢出图像将被隐藏。

从外部文件加载轮播后的图像高度问题（GlideJS）

1 个答案: