php - 带有 ACF 中继器字段的 Bootstrap 4 Carosuel
问题描述
鉴于此 HTML 代码,我如何使用 Bootstrap 4 创建带有缩略图的动态 Carosuel,可以使用 ACF 中继器在后端进行更新?
我的中继器字段被调用carousel_repeater
,在里面我有一个名为的图像字段carosuel_image
HTML 代码
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
<!-- slides -->
<div class="carousel-inner">
<div class="carousel-item active"> <img src="https://i.imgur.com/weXVL8M.jpg" alt="Hills"> </div>
<div class="carousel-item"> <img src="https://i.imgur.com/Rpxx6wU.jpg" alt="Hills"> </div>
<div class="carousel-item"> <img src="https://i.imgur.com/83fandJ.jpg" alt="Hills"> </div>
<div class="carousel-item"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" alt="Hills"> </div>
</div> <!-- Left right --> <a class="carousel-control-prev" href="#custCarousel" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#custCarousel" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> <!-- Thumbnails -->
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
</ol>
</div>
</div>
</div>
</div>
解决方案
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="custCarousel" class="carousel slide" data-ride="carousel" align="center">
<div class="carousel-inner">
<?php
if( have_rows('carousel_repeater') ):
// Loop through rows.
while( have_rows('carousel_repeater') ) : the_row();
$sub_value = get_sub_field('sub_field');// whatever ur image field is called
?>
<div class="carousel-item active"> <img src="<?php echo $sub_value['url'] ?>g" alt="Hills"> </div>
<?php
// End loop.
endwhile;
?>
<ol class="carousel-indicators list-inline">
<li class="list-inline-item active"> <a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#custCarousel"> <img src="https://i.imgur.com/weXVL8M.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-1" data-slide-to="1" data-target="#custCarousel"> <img src="https://i.imgur.com/Rpxx6wU.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="2" data-target="#custCarousel"> <img src="https://i.imgur.com/83fandJ.jpg" class="img-fluid"> </a> </li>
<li class="list-inline-item"> <a id="carousel-selector-2" data-slide-to="3" data-target="#custCarousel"> <img src="https://i.imgur.com/JiQ9Ppv.jpg" class="img-fluid"> </a> </li>
</ol>
</div>
</div>
</div>
</div>
<?php
endif;
?>
Probs something like this, your gna need to play with it as i havent tested it but this is a start, would recommend you look into the documentation for ACF repeaters
推荐阅读
- git - 当我尝试在 OSX 上缓存我的 Github 用户名和密码时没有收到钥匙串提示
- php - 在浏览器中访问时,file_put_contents 不起作用
- java - 三重条件while循环不起作用
- c - 哪个更快?取消引用指针或使用方括号?
- python - Gurobi 在处理小数字时会产生错误的解决方案
- javascript - 正则表达式以匹配 MM-DD-YYYY HH:mm:ss 格式的日期
- android - Android - 如何在服务器和客户端之间传输文件
- android - 如何在Android O系统设置中按字母顺序更改通知渠道(类别)的顺序?
- ios - iOS:如何在新的非键自定义窗口中添加浮动按钮?
- mysql - 演示模式 1 小时后 MySQL 数据库自动重置