显示基于ACF Repeater子字段的滑动幻灯片

Question

基本上我有如下所示的ACF Repeater字段

我还有一个变量，其值为用户的位置。

例如，如果用户的位置变量值设置为A，我想显示幻灯片，其中“区域”字段值设置为“ A”。

这是我使用滑动器进行简单滑块的代码。

<div class="container-fluid container-fluid-no">
<div class="row alto-bg">
    <div class="col-lg-12 px-0">
        <div class="row first-slider">
            <div class="col-lg-12 swiper-container px-0 mx-0">
                <div class="swiper-wrapper">
                    <?php
                        if( have_rows('slider') ):
                            while ( have_rows('slider') ) : the_row(); ?>  
                                <div class="swiper-slide" style="background- 
      image:url('<?php echo the_sub_field('background_image'); ?>');">
                                    <div class="row slide-content">
                                        <div class="col-lg-12">
                                            <div class="pt-3 ">
                                                <?php 
     the_sub_field('slide_content');?>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="slider-overlay"></div>
                                </div>
                            <?php endwhile;
                        else :
                        endif;
                    ?>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <script>
                    var mySwiper = new Swiper('.swiper-container', {
                        direction: 'horizontal',
                        loop: true,
                        effect: 'fade',
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                        },
                        keyboard: {
                            enabled: true,
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        }
                    })
                </script>
              </div>
          </div>
       </div>
   </div>
 </div>
<div>

希望这是有道理的。