php - Bootstrap Carousel 不能在 wordpress 中使用数组
问题描述
我的滑动引导轮播不工作?我在自定义 Wordpress 下划线主题中创建了一个带有自定义帖子类型的循环。帖子但不动。他们的支持与时俱进。此外,导航不起作用。轮播一次显示 3 张卡片并循环播放每张卡片。
<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<div class="carousel-inner row w-100 mx-auto">
<?php $loop = new WP_Query( array( 'post_type' => 'case_studies', 'orderby' => 'post_id', 'order' => 'ASC')) ; ?>
<?php while ( $loop->have_posts()) : $loop->the_post(); ?>
<div class="carousel-item col-md-4 active">
<div class="card">
<!-- if uploaded an image -->
<?php if( get_field('case_Study_carousel_frontpage_image')): ?>
<img class="card-img-top img-fluid" src="<?php the_field('case_Study_carousel_frontpage_image'); ?>" alt="Card image cap">
<?php endif; ?>
<div class="card-body">
<h4 class="card-title"><?php the_title(); ?></h4>
<p class="card-text">TYEST This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
这是JS。
$(document).ready(function() {
$("#myCarousel").on("slide.bs.carousel", function(e) {
var $e = $(e.relatedTarget);
var idx = $e.index();
var itemsPerSlide = 3;
var totalItems = $(".carousel-item").length;
if (idx >= totalItems - (itemsPerSlide - 1)) {
var it = itemsPerSlide - (totalItems - idx);
for (var i = 0; i < it; i++) {
// append slides to end
if (e.direction == "left") {
$(".carousel-item")
.eq(i)
.appendTo(".carousel-inner");
} else {
$(".carousel-item")
.eq(0)
.appendTo($(this).find(".carousel-inner"));
}
}
}
});
});
解决方案
推荐阅读
- multithreading - 将 ThreadPoolTaskExecutor 与 FlatFileItemReader 和 AsyncItemProcessor + Writer 一起使用是否是线程安全的?
- ios - 元组类型“()”的值没有成员“参数”[Swift]
- java - 如何使用java构造函数显示数据?
- google-cloud-platform - 运行数据融合管道时如何解决“不支持的类型 NULL”错误
- amazon-web-services - terraform 中的 aws_config_remediation_configuration 资源中缺少参数
- javascript - 时间错了
- https - 如何解释 Cloudflare 的 SVCB/HTTPS DNS 记录类型?
- swift - SwiftUI iOS14 Widget - 使用相同的 WidgetFamily 创建多布局
- derby - 我的删除按钮按钮不起作用无效光标状态 - 没有当前行
- javascript - TypeError: undefined is not an object (evaluate '_useContext.dispatch') when using context in react native