如何使用Fancybox 3创建内联元素库？

Question

我正在尝试使用Fancybox 3创建内联元素库。我已经让各个弹出窗口正常工作，现在我正试图弄清楚如何利用Fancybox的默认导航行为用户能够遍历弹出元素。

这是我的代码：

<ul id="testiFeed" class="list-unstyled">
                            <?php 
                                $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 9 );
                                $loop = new WP_Query( $args );
                                $i = 1;
                                while ( $loop->have_posts() ) : $loop->the_post(); ?>

                                  <li>
                                    <div class="testiPadding">
                                        <a data-fancybox data-src="#hidden-content-<?php echo $i ?>" href="javascript:;">
                                            <div class="testiBox" style="background-image: url(<?php the_post_thumbnail_url('medium_large'); ?>);">
                                                <p class="testiUser">@<?php the_field('instagram_username'); ?></p>
                                                <div class="testiCover"></div>
                                            </div>
                                        </a>
                                    </div>
                                  </li>

                                  <div class="testiPopup" style="display: none;" id="hidden-content-<?php echo $i ?>">
                                    <div class="testiRow">
                                        <div class="testiHalf testiFeature" style="background-image: url(<?php the_post_thumbnail_url('large'); ?>);">

                                        </div>
                                        <div class="testiHalf testiRight">
                                            <div class="testiAuthor">
                                                <div class="testiProfile" style="background-image: url(<?php the_field('user_photo'); ?>);"></div>
                                                <h2><?php the_title(); ?></h2>
                                                <p><em><i class="fa fa-instagram"></i> @<?php the_field('instagram_username'); ?></em></p>
                                            </div>
                                            <div class="testiContent">
                                                <?php the_content(); ?>
                                            </div>
                                            <div class="testiShare">
                                                <p>Share <a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a></p>
                                            </div>
                                        </div>
                                    </div>
                                  </div>

                                <?php $i++; endwhile;
                            ?>
                        </ul>

我尝试过添加rel =＆＃34; group1＆＃34;和data-fancybox =＆＃34; group＆＃34;触发弹出窗口但没有运气的锚元素。

我找到了其他类似的解决方案，但仅适用于不适用于Fancybox 3的旧版Fancybox。

有什么想法吗？