帶 php 的引導卡輪播

Question

我正在嘗試將自定義帖子圖片庫圖像放入帶有輪播的引導卡中，到目前為止，我能夠獲取圖像，但它們在每個圖像下方一一顯示，而不是輪播，請糾正我在這里做錯了什么.

<?php
    $model_images = get_field('gallery');
    $image_size = 'full';
                    
    if( $model_images ): ?>
        <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active">
                <?php foreach( $model_images as $image_id ):?>
                    <div class="card">
                        <img class="card-img-top" src="<?php echo wp_get_attachment_image( $image_id, $image_size ); ?>" alt="Card image cap"/>
                        <div class="card-body">
                            <h1 class="card-title"><?php the_title();?></h1>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        </div>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        <?php endif;?>
    </div>

Answer 1

這是我的解決方案。 我不能保證它會起作用，因為我無法運行代碼：

<?php
 $model_images = get_field('gallery');
 $image_size = 'full';

 if ($model_images) { ?>
 <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <?php foreach ($model_images as $key => $image_id) { 
       echo '<div class="carousel-item ' . 
            ($key == 0 ? 'active' : '') . '">'; ?>
       <div class="card">
         <img class="card-img-top" src="<?php echo wp_get_attachment_image($image_id, $image_size); ?>" alt="Card image cap">
         <div class="card-body">
           <h1 class="card-title"><?php the_title(); ?></h1>
           <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
       </div>
     </div>
   </div>
   <?php } ?>
 </div>
 <?php } ?>

我使用了更現代的 PHP 語法，並將<div class="carousel-item active">移動到圖像循環中。

Answer 2

這就是我解決這個輪播問題的方法：

<div class="gallery_wrap">
<div id="model-gallery" class="owl-carousel owl-theme">

/* Checking to see if the post item has a featured image or not if it has the image already I'm requesting to show the featured image in card view aswell*/

<?php $featured_image = wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()), 'model-featured-image' );
    if($featured_image == ''){
        $featured_image = '';
        } ?>
        
    <div class="card">
    <img class="card-img-top" src="<?php echo $featured_image; ?>" alt="Card image cap">
        <div class="card-body">
            <h1 class="card-title"><?php the_title();?></h1>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
    </div>
                        
    /* This is important where I'm calling the gallery field items from my custom posts types */

    <?php
    $model_images = get_field('gallery');
    $image_size = 'full';
                        
    /* And If there are images available in the gallery loop all images individually using foreach loop and display them in cardview by ID*/
    if( $model_images ):  
    foreach( $model_images as $image_id ):?>
    
    <div class="card">
    <img class="card-img-top" src="<?php echo wp_get_attachment_image_url( $image_id, $image_size ); ?>" alt="<?php the_title();?>">
        <div class="card-body">
            <h1 class="card-title"><?php the_title();?></h1>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
         </div>
    </div>
    <?php endforeach; endif;?>
</div>

當我發布這個問題時，我試圖讓引導輪播工作，但由於某種原因它沒有工作，所以我使用引導卡將其更改為貓頭鷹輪播，並且它工作。

我還在我的代碼中添加了注釋，以解釋我如何從每個帖子庫字段中請求特色圖片和其他圖片。

Answer 3

根據我的評論，清理了您發布的代碼。

這可能是調試問題的開始。 請參閱下面代碼中的 html 注釋以了解對代碼的更改...

<?php

$model_images = get_field('gallery');
$image_size = 'full';
                    
if( $model_images ): ?>

<div id="carouselExampleSlidesOnly" class="carousel slide">

    <div class="carousel-inner">
        <div class="carousel-item active">

        <?php foreach( $model_images as $image_id ): ?>

            <div class="card">
                <img class="card-img-top" src="<?php echo wp_get_attachment_image( $image_id, $image_size ); ?>" alt="Card image cap"/>

                <div class="card-body">
                    <h1 class="card-title"><?php the_title(); ?></h1>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>

            </div>

            <!-- </div> (remove this div as there is no opening div) -->

        <?php endforeach; ?>

        </div>  
    </div>

</div><!-- moved removed div above to here close properly -->

<!-- moved php endif to end of you code --> 
<?php endif;?>

確保您的 html 有效、語義等，如果您使用的是體面的 ide，它應該指出這些錯誤。 👍🏼