时间戳

首页 > 解决方案 > 光滑的滑块不改变活动的幻灯片位置

php - 光滑的滑块不改变活动的幻灯片位置

问题描述

我正在制作一个光滑的滑块，其中包含 3 个带有背景图像的数字。第一张幻灯片正常工作，但以下幻灯片均无法显示。检查员显示，第一张幻灯片之后的每张幻灯片都保持其非活动幻灯片位置，由 slick 提供，这会将它们推离屏幕。当我简单地使用<img />而不是<figure>or时，它确实有效<div>。<img />如果不是因为这些给我的尺寸问题，我会使用。

我循环播放内容，以便轻松控制幻灯片的数量

<div class="hero__background">
  <?php foreach ($images as $image) { ?>
     <div class="hero__background-image" style="background-image: url('<?php echo $image['url']; ?>');"></div>
  <?php } ?>
</div>

这是当前的 CSS

&.hero {
  position: relative;
  height: 550px;

  .hero__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: lightgray;
    z-index: -999;

    hero__background-image {
      background-size: cover;
    }

    .slick-list,
    .slick-track,
    .slick-slide {
      height: 100%;
      margin: 0;
    }
  }
}

和要求的JS :)

$('.hero__background').slick({
  infinite: true,
  autoplay: true,
  fade: true,
  speed: 600,
  arrows: false,
  dots: false
});

背景图像失败的原因可能是什么？任何帮助和建议将不胜感激。

标签： phpcssslick.js

解决方案

推荐阅读