css - Wordpress ACF Repeater 背景图片只加载最后一张图片
问题描述
我有一个光滑的轮播,我希望这些点能够在当前正在显示的幻灯片上动态显示图像。
图像通过我放置在头部的 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 如下所示:
解决方案
发生的情况是,每次您在内联块 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>
推荐阅读
- javascript - Android - 使用 jsoup 从 webview 解析网站
- json - 如何通过 BigQuery 中 STRUCT 类型的表达式解决分组问题
- c# - 如何将 appsettings.json 绑定到类?
- c++ - 每次调用redisAsyncCommand接收数据之前是否需要调用redisLibeventAttach
- python-3.x - 使用 dex (oauth / openid connect) 连接到超集并将 dex 组映射到角色
- android - FlutterLocal Notification(持续通知)
- php - 如何在 PHP 中获得类似于 MySQL 提供的从 0 开始的周数?
- java - 如何使用 gradle 创建可导入的 jar?
- reactjs - @mui v5 带有 React Hook Form 7 的自动完成功能不起作用?
- javascript - 如何在javascript中将数组元素转换为条件为真和一个字符串值的对象