我正在嘗試創(chuàng)建一個(gè)輪播滑塊，并使用 Bootstrap + 高級(jí)自定義字段使其工作。一切正常，但是我不知道如何使指標(biāo)與我擁有的圖像數(shù)量相匹配。因?yàn)樗菫槊總€(gè)圖像單獨(dú)編寫(xiě)的。我不擅長(zhǎng) JS，這就是我使用 Bootstrap 采用這種方法的原因。至于 ACF，我使用的是 Repeater 和 Image 的一個(gè)子字段（甚至我稱它為畫(huà)廊；））幫助將被appriciated。some CSS code here <div class="container"> <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <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"> <?php if( have_rows('aa-gallery') ): $count = 0; while ( have_rows('aa-gallery') ) : the_row(); ?> <div class="item <?php if (!$count) { ?>active<?php } ?>"> <img src="<? the_sub_field('aa-gpic');?> " alt="<? the_sub_field('aa-caption');?>" style="width: 100%;"> <div class="carousel-caption"> <h3> <?php the_sub_field('aa-caption'); ?> </h3> </div> </div> <? $count++; endwhile; else : // no rows found endif; ?> </div></section>
1 回答
素胚勾勒不出你
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊
最簡(jiǎn)單的解決方案可能是使用 PHP 作為指標(biāo)，就像使用它來(lái)列出 cariousel 項(xiàng)目本身一樣：
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<?php if( have_rows('aa-gallery') ): ?>
<!-- Indicators -->
<ol class="carousel-indicators">
<?php
$count = 0;
while ( have_rows('aa-gallery') ) : the_row();
?>
<li data-target="#myCarousel" data-slide-to="<?php echo $count; ?>" class="<?php if (!$count) {
?>active<?php
} ?>"></li>
<?php
$count++;
endwhile;
?>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$count = 0;
while ( have_rows('aa-gallery') ) : the_row();
?>
<div class="item <?php if (!$count) {
?>active<?php
} ?>">
<img src="<? the_sub_field('aa-gpic');?> " alt="<? the_sub_field('aa-caption');?>" style="width: 100%;">
<div class="carousel-caption">
<h3>
<?php the_sub_field('aa-caption'); ?>
</h3>
</div>
</div>
<?
$count++;
endwhile;
?>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
<?php endif; ?>
</div>
</div>
對(duì)于 JS 中更優(yōu)雅的解決方案，在初始化滑塊之前，您應(yīng)該計(jì)算項(xiàng)目的數(shù)量，然后用匹配的元素?cái)?shù)量填充指標(biāo)列表。但是上面的代碼也應(yīng)該足夠好用。
- 1 回答
- 0 關(guān)注
- 120 瀏覽
添加回答
舉報(bào)
0/150
提交
取消