Wordpress ACF Repeater 背景图片只加载最后一张图片

Posted 2023-03-25

【中文标题】Wordpress ACF Repeater 背景图片只加载最后一张图片

【英文标题】：Wordpress ACF Repeater background image only loading last image

【发布时间】：2020-03-29 23:14:32

【问题描述】：

我有一个光滑的轮播，我希望圆点在当前正在显示的幻灯片上动态显示图像。

图像通过我放置在头部的 Wordpress ACF 中继器动态显示

这是我脑海中的代码：

  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <style type="text/css">
  <?php if( have_rows('testimonial_slides') ): ?>

    .testimonial_slider_dots li 
        background: #FFF0CE;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        margin: 15% 0;
    

    .testimonial_slider_dots .slick-active 
        <?php while( have_rows('testimonial_slides') ): the_row();
            $icon = get_sub_field('testimonials_slide_product_icon');
        ?> 
            background: url('<?php echo $icon['url']; ?>');
        <?php endwhile; ?>
        background-repeat: no-repeat !important;
        background-position: 50% 50% !important;
        background-size: cover !important;
        width: 50px !important;
        height: 50px !important;
    

  <?php endif; ?>
  </style>
  @php wp_head() @endphp
</head>

这是我的 JS

$('.testimonials-slider').slick(
    dots: true,
    arrows: false,
    infinite: true,
    //autoplay: true,
    slidesToShow: 1,
    adaptiveHeight: true,
    dotsClass: 'testimonial_slider_dots',
    responsive: [
           
            breakpoint: 768,
            adaptiveHeight: false,
        ,
    ],
);

图像正在显示，但我只看到中继器中的最后一张图像，而不是与我当前看到的幻灯片匹配的特定图像。

编辑：

这是 html：

<ul class="testimonial_slider_dots" style="display: flex;" role="tablist">
    <li class="slick-active" role="presentation">
        <button type="button" role="tab" id="slick-slide-control10" aria-controls="slick-slide10" aria-label="1 of 6" tabindex="0" aria-selected="true">1</button>
    </li>
    <li role="presentation">
        <button type="button" role="tab" id="slick-slide-control11" aria-controls="slick-slide11" aria-label="2 of 6" tabindex="-1">2</button>
    </li>
    <li role="presentation">
        <button type="button" role="tab" id="slick-slide-control12" aria-controls="slick-slide12" aria-label="3 of 6" tabindex="-1">3</button>
    </li>
    <li role="presentation">
        <button type="button" role="tab" id="slick-slide-control13" aria-controls="slick-slide13" aria-label="4 of 6" tabindex="-1">4</button>
    </li>
    <li role="presentation">
        <button type="button" role="tab" id="slick-slide-control14" aria-controls="slick-slide14" aria-label="5 of 6" tabindex="-1">5</button>
    </li>
    <li role="presentation"><button type="button" role="tab" id="slick-slide-control15" aria-controls="slick-slide15" aria-label="6 of 6" tabindex="-1">6</button>
    </li>
</ul>

当页面加载时，检查时的 css 如下所示：

screenshot of css on load

【问题讨论】：

能否分享一下您想要实现的 HTML。

【参考方案1】：

发生的情况是，每次您在内联块 css 中实例化一个新的背景图像时，它都会覆盖下一个。我建议在每张幻灯片的元素上写内联背景图片，这将阻止 css 相互覆盖。

所以你的动态代码看起来像这样

<div class="testimonial-slider">
   <?php while( have_rows('testimonial_slides') ): the_row(); ?>
      <div class="single-slide" style="background-image: <?php get_sub_field('testimonials_slide_product_icon')['url']; ?>">
  <?php endwhile; ?>
</div>