我试图在PHP中为Bootstrap Carousel编写一个foreach循环,但问题是'm having is, the first slide' s div必须设置为"active"而不是其余部分,并且li的"data-slide-to"必须设置为正确的数字,使第一个"[0]"具有一类活跃的,但不是其余的......
我知道如何获得foreach的第一个结果,但我不知道如何分别调用第二个和更多的结果,也不知道如何使它与“data-slide-to”相匹配 .
这是我的代码如下 .
Disclaimer: PHP代码是特定于Wordpress的,但问题的答案不涉及Wordpress特定的代码 .
PHP
$query_images_args = array(
'post_type' => 'attachment',
'post_mime_type' => 'image',
'post_status' => 'inherit',
'posts_per_page' => - 1,
);
$query_images = new WP_Query( $query_images_args );
$images = array();
foreach ( $query_images->posts as $image ) {
$images[] = wp_get_attachment_url( $image->ID );
}
for($i = 0; $i < count($images); $i++) {
$imageURL = $images[$i];
// I would echo all the entries with:
// echo $imageURL;
}
HTML
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
//Here's the active "li", which would be set to $imageURL[0]
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
//Here are the rest of the "li"s , which idk how to set up?
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
//Again, I know to set the background-image:url to '<?php echo $imageURL[0] ?>'
<div class="fill" style="background-image:url('img/01.png');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
//Not sure about here...
<div class="fill" style="background-image:url('img/02.png');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
//This part needs to be covered by the 2nd imageURL and beyond...
<div class="fill" style="background-image:url('img/03.png');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
不确定我是否正确接近它,但我无法让它工作 .
2 回答
为了你的形象
希望这会给你一个想法 .
很久以前你可能已经解决了这个问题,但这就是我解决第一个被设置为“活动”的图像所做的 .