当我用 for 循环填充幻灯片时，Swiper js 我不能使用箭头

问：

我正在使用 swiper js 创建幻灯片，并使用 chartjs 用 canvas 元素填充幻灯片。以下是代码和 photos.slides 正确呈现，但只有一个可见且箭头不起作用。请帮我如何解决这个问题。getCaseRequires 函数调用了 6 次。代码 wiev

 <div class="competition-slider" >
                    <div class="swiper compSwiper">
                        <div class="swiper-wrapper">
                            
                        </div>
                        <!-- <div class="swiper-pagination"></div> -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
</div>

<template id="competition-slide-template">
    <div class="swiper-slide">
        <h5 class="title">{title}</h5>
        <canvas class="resultChart"></canvas>
    </div>
</template>

var compSwiper = new Swiper(".compSwiper", {
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
          
            });

function getCaseDemands(slide, countOfSlide) {
    $.ajax({
        type: "GET",
        url: url, 
        data: {
            case_id: slide?.case_unique_id
        },
        success: function(res) {
            console.log(res, "res")
            const compSlideTemplate = $($("#competition-slide-template").clone().html());
            compSlideTemplate.html(compSlideTemplate.html().replaceAll("{title}", `${slide?.case_name}`));
            const data = {
               labels: res.map((item) => item.case_demand),
                datasets: [{label: "",
                            data: res.map((item) => parseInt(item.case_value)),
                                backgroundColor: ["rgba(131, 178, 214,0.5)",],
                                borderColor: ["rgba(31, 121, 184,1)"],
                                borderWidth: 3,
                                },
                            ],
                        };
                        const config = {
                            type: "radar",
                            data: data,
                            options: {
                                responsive: true,
                                scales: {
                                    r: {
                                        max: 100,
                                        min: 0,
                                        ticks: {
                                            stepSize: 20,
                                            display: false,
                                        },
                                        grid: {
                                            color: "#9FD1F6",
                                        },
                                        angleLines: {
                                            color: "#9FD1F6",
                                        },
                                        pointLabels: {
                                            font: {
                                                size: 13,
                                                family: "Poppins",
                                                weight: "500",
                                            },
                                        },
                                    },
                                },
                                elements: {
                                    point: {
                                        color: "red",
                                    },
                                },
                                plugins: {
                                    legend: {
                                        display: false,
                                    },
                                },
                            },
                        };

                        const resultChartElement =
                            compSlideTemplate.find(".resultChart")[0];
                        const myChart = new Chart(resultChartElement, config);
                        $(".compSwiper .swiper-wrapper").append(
                            compSlideTemplate
                        );
                        compSwiper.update();.....

function settingSlides() {
     $('.competition-slider').each(function() {
         new Swiper($(this).find('.compSwiper')[0], {
             navigation: {
               nextEl: '.swiper-button-next',
               prevEl: '.swiper-button-prev',
              },
            
              })
           
         });

     }

创建所有幻灯片后，我想运行并配置此功能，但这次不起作用。某些幻灯片不可见。当我想使用虚拟数据时，有些幻灯片是不可见的。 我已经处理这个问题 3 天了，我在任何地方都找不到解决方案。我正在等待您的帮助和建议。我尝试了我能找到的所有解决方案，提前感谢您的帮助