如何将带有缩略图的硬编码滑块转换为动态滑块

Question

我有一个幻灯片，缩略图用html硬编码，并使用带有javascript的onclick事件来控制幻灯片上一个和下一个按钮以及缩略图点击。我为 wordpress 动态地转动了内容，但是，由于当前 Slide(n( 是硬编码的，因此我无法使缩略图点击事件的工作。如何让我的当前幻灯片索引动态响应？ 这是我的代码 噗嗤 ：

foreach($page_children as $page_children):
//Get Thumbnails ID from children pages
$children_thumbnail_ID= get_post_thumbnail_id($page_children);
//Get Thumbnail source
$children_thumbnail_image=wp_get_attachment_image_src($children_thumbnail_ID,'thumbnail');?>
<img class="thumbs" src="<?php ech0 $children_thumbnail_image[0];>"onclick="currentSlide(1)">
<?php endforeach; 
};

爪哇语

<script>
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var thumbs = document.getElementsByClassName("thumbs");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < thumbs.length; i++) {
thumbs[i].className = thumbs[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
thumbs[slideIndex-1].className += " active";
}
</script>

希望不要太混乱，谢谢你的帮助，我真的很感激！或者也许有另一种方法可以做到这一点？基本上我没有使用插件，因为我需要我的缩略图在我的标题部分，而我的幻灯片内容在正文中。此外，我正在使用要在父页面的幻灯片中显示的子页面的特色图像。有没有更好的方法可以做到这一点？我对wordpress，php和javascript非常陌生。

Answer 1

很简单。 您唯一需要做的就是在循环中添加一个整数。这是我为您更改的代码。

<?php
$i = 0;
foreach ( $page_children as $page_children ):
//Get Thumbnails ID from children pages
$i ++; // we increase it in the loop and print it on html.
$children_thumbnail_ID = get_post_thumbnail_id( $page_children );
//Get Thumbnail source
$children_thumbnail_image = wp_get_attachment_image_src( $children_thumbnail_ID, 'thumbnail' );
echo '<img class="thumbs" src="' . $children_thumbnail_image[0] . '" onClick="currentSlide(' . $i . ')" />';
endforeach;

Answer 2

好的，我让它工作了。我在onClick中回显了整数，并将增量完全放在循环的末尾，它现在可以工作了！

$counter = 1;
foreach($page_children as $children):
<img class="thumbs" src="<?php echo $children_thumbnail_image[0];?>    
"onclick="currentSlide(<?php echo $counter;?>)">
<?php $counter ++ ?>
<?php endforeach; 

感谢您的帮助！