如何在 php 中为 Bootstrap 轮播编写 foreach 循环？答案

【问题标题】：How do I write a foreach loop for a Bootstrap carousel in php?如何在 php 中为 Bootstrap 轮播编写 foreach 循环？
【发布时间】：2016-05-09 12:16:05
【问题描述】：

我正在尝试在 PHP 中为 Bootstrap Carousel 编写一个 foreach 循环，但我遇到的问题是，第一张幻灯片的 div 必须设置为“活动”，而不是其余的，并且 li 的 "data-slide-to" 必须设置为正确的数字，使第一个 "[0]" 有一个活动类，但不是其余的......

我知道如何获得 foreach 的第一个结果，但我不知道如何分别调用第二个及以后的结果，也不知道如何使其与“data-slide-to”相匹配。

下面是我的代码。
免责声明： 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>

不确定我是否正确接近它，但我无法让它工作。

【问题讨论】：

作为免责声明：表示您不需要 wordpress 特定代码作为答案，可能与 create a slideshow of images inside bootstrap modal dynamically using PHP 重复

标签： php wordpress twitter-bootstrap foreach

【解决方案1】：

您可能很久以前就解决了这个问题，但这是我为解决第一个图像被设置为“活动”的问题所做的。

echo '<div class="item active">'.$images[0].'</div>';
unset($images[0]);
foreach ($images as $img){
   echo '<div class="item">'.$img.'</div>';
}

【讨论】：

【解决方案2】：

<?php 

**//for indicators**

foreach($yourArray as $key=>$result){

     <li data-target="#myCarousel" data-slide-to="<?php echo $key; ?>" class="<?php if($ke==0){echo "active";} ?>"></li>
}

为了你的形象

foreach($yourArray as $key=>$result){

     <div class="item <?php if($key==0){echo "active";} ?>">
                <div class="fill" style="background-image:url('img/01.png');"></div> // Here is Your Image Url 
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
}

希望这会给你一个想法。

【讨论】：