Smart Custom Fields繰り返しフィールドで投稿した画像を、swiperのサムネイル付きスライダーで表示したい
解決したいこと
・Smart Custom Fieldsの繰り返しフィールドで投稿した画像を、swiperのサムネイル付きスライダーで表示したいのですが、
メイン画像は問題なく表示されているのですが、サムネイル画像が本来横並びで表示してほしいところ縦並びにしか表示されず、改善されず困っております。
詳しい方ご教示いただけると幸いです。
自分で試したこと
<?php
$imgGroup = SCF::get('グループ名');
$count = count($imgGroup);
?>
<?php if ($count > 1) : ?>
<!-- swiper -->
<div class="swiper">
<div class="swiper-wrapper">
<?php
foreach ($imgGroup as $fields) :
$imgurl = wp_get_attachment_image_src($fields['名前'], 'large');//
?>
<div class="swiper-slide">
<div><img src="<?php echo $imgurl[0]; ?>" alt="<?php the_title() ?>"></div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php else : ?>
<div class="thumbnail">
<?php
foreach ($imgGroup as $fields) :
$imgurl = wp_get_attachment_image_src($fields['名前'], 'large');
if ($fields['名前'] === '') :
?>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/common/noimage.jpg" alt="<?php the_title(); ?>">
<?php else : ?>
<img src="<?php echo $imgurl[0]; ?>" alt="<?php the_title() ?>">
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<div><?php the_content(); ?></div>
<?php if ($count > 1) : ?>
<?php $number = 1; ?>
<?php if ($imgGroup) :?>
<ul class="thumbList">
<?php foreach ($imgGroup as $fields) : ?>
<?php $imgurl = wp_get_attachment_image_src($fields['名前'], 'large'); ?>
<!-- ループ -->
<li class="thumbItem">
<a href="javascript:void(0);" onclick="slideThumb(<?php echo $number; ?>)">
<img src="<?php echo $imgurl[0]; ?>" alt="<?php the_title() ?>">
</a>
</li>
<?php $number++;
endforeach;
?>
</ul>
<?php endif; ?>
<?php endif; ?>
<以下script.js>
const swiperMain = new Swiper('.swiper', {
speed: 600,
loop: true,
});
// slideToメソッドを実行する関数を定義
function slideThumb(index) {
swiperMain.slideTo(index);
}
0
