我在這個專案上使用了一張Swiper.js幻燈片，每張幻燈片的影像和文本都將通過 WordPress 面板進行控制，包括幻燈片將有多少“頁面”。這意味著如果客戶決定幻燈片將有，比如說 5 頁，var $swiperPages 將存盤這個數字 5，所以我猜有兩個選項：
通過 PHP 創建 5 個帶有子內容的 HTML 父 div（如 h2、p 和 img）或
洗掉 HTML 父 div 及其 ID 號大于 5 的子內容。
這是頁面的 HTML：
<?php
$swiperPages = //get_theme_mod() code here to retrieve the value
$swiperNum = 1;
$title = 'title';
$subtitle = 'subtitle'
$imageurl = 'http://mypage.com/banner'
?>
<div class="swiper">
<div class="swiper-wrapper">
<!-- slide page n° 1 -->
<div id="<?php echo $swiperNum;?>" class="swiper-slide row">
<h2><?php echo $title . $swiperNum; ?></h2>
<p><?php echo $subtitle . $swiperNum; ?></p>
<img src="<?php echo $imageurl . $swiperNum ?>"></img>
</div>
<!-- slide page n° 1 -->
<div id="<?php echo $swiperNum;?>" class="swiper-slide row">
<h2><?php echo $title . $swiperNum; ?></h2>
<p><?php echo $subtitle . $swiperNum; ?></p>
<img src="<?php echo $imageurl . $swiperNum ?>"></img>
</div>
<!-- slide page n° 3 and so on.. -->
<div id="<?php echo $swiperNum;?>" class="swiper-slide row">
<h2><?php echo $title . $swiperNum; ?></h2>
<p><?php echo $subtitle . $swiperNum; ?></p>
<img src="<?php echo $imageurl . $swiperNum ?>"></img>
</div>
</div>
<div class="swiper-paginacao"></div>
</div>
Obs：如您所見，在創建單個幻燈片頁面的每個父div的末尾，我使用最后一個#swiperNum上的incrementor 將下一個的值增加一，不僅更改了ID，還更改了標題，字幕和圖片網址。
我只在上面的示例中創建了 3 個.swiper-slide div，但我需要其中的 10 個 div，因為每個 div 都包含一個幻燈片頁面的內容，我將允許客戶在這張幻燈片上最多擁有 10 個頁面。
問題是我不能讓空的 .swiper-slide父 div 保留在頁面上，因為即使沒有文本和影像，Swiper.js 也會自動為每個幻燈片頁面創建一個專案符號跨度。
我嘗試使用javascript var.remove()函式來消除空 div，但效果不佳。腳本混淆了幻燈片的順序。我需要一個 PHP 解決方案，以便在 Swiper.JS 作業之前呈現。
如何使用 PHP 根據 $swiperPages 值洗掉或創建那些父 div 及其子內容？
我正在作業的頁面是在線的，所以如果它更容易理解我在說什么，你可以查看http://lucasmarinifalbo.com/clinica標題上的幻燈片
uj5u.com熱心網友回復：
您要做的是制作一個 php for 回圈，其中迭代次數是頁數。像這樣的東西：
<?php
for ($x = 0; $x <= $swiperNum; $x ) { ?>
<div id="<?php echo $x;?>" class="swiper-slide row">
<h2><?php echo $title . $x; ?></h2>
<p><?php echo $subtitle . $x; ?></p>
<img src="<?php echo $imageurl . $x?>"></img>
</div>
<?php } ?>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/410409.html
標籤：
上一篇：無法設定引導卡體的寬度