我正在嘗試將自定義帖子圖片庫影像放入帶有輪播的引導卡中，到目前為止，我能夠獲取影像，但它們在每個影像下方一一顯示，而不是輪播，請糾正我在這里做錯了什么.
<?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>
uj5u.com熱心網友回復：
這是我的解決方案。我不能保證它會起作用，因為我無法運行代碼：
<?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 hljs-variable">$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 >影像回圈內部。
uj5u.com熱心網友回復：
根據我的評論，清理了您發布的代碼。
這可能是除錯問題的開始。請參閱下面代碼中的 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，它應該指出這些錯誤。????
uj5u.com熱心網友回復：
這就是我解決這個輪播問題的方法：
<div class="gallery_wrap">
<div id="model-gallery" class="owl-carousel owl-theme">
<?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>
<?php
$model_images = get_field('gallery');
$image_size = 'full';
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>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/487980.html