Question

我对UIkit的Slideshow组件有疑问：图片的位置为0，不显示图片-如果没有uk-cover，则它们会显示第一张图片，但接下来的图片是Style =“ width：0; height：0”…

此处是代码

<div class="uk-position-relative uk-visible-toggle uk-slideshow" uk-slideshow="animation: fade">
  <ul class="uk-slideshow-items" uk-lightbox="animation: fade">
      <li class="uk-active uk-transition-active" style="z-index: -1;">
        <a href="#"><img src="imag1.jpg" alt=""></a>
      </li>
      <li>
        <a href="#"><img src="image2.jpg" alt=""></a>
      </li>
   </ul>

   <div class="uk-position-relative uk-position-small uk-visible-toggle uk-light uk-slider uk-slider-container" uk-slider="">
     <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
       <li uk-slideshow-item="0" class="uk-transition-active uk-active">
         <a href="#"><img src="image1.jpg"></a>
       </li>
       <li uk-slideshow-item="1" >
         <a href="#"><img src="image2.jpg" alt=""></a>
       </li>
    </ul>
  </div>
</div>

Answer 1

添加uk-position-cover类。

<a class="uk-position-cover" href="image2.jpg"><img src="image2.jpg" alt=""></a>

Answer 2

幻灯片组件将图像显示为背景图像。因此，幻灯片容器必须具有高度属性。

        <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1"
        uk-slideshow="animation: slide; autoplay: true; autoplay-interval: 3000">

        <ul class="uk-slideshow-items" uk-height-viewport="offset-top: true;">

uk-height-viewport="offset-top: true" --> set min-height as 100vh or less according to viewport and elements (without fixed or absolute positionned) on top of slideshow.

这是带有 data-srcset 的 pen 幻灯片。您可以分别为移动设备和桌面设备添加图片网址。

UIkit 3x幻灯片图像的大小为0

2 个答案: