I want to print out the Swiper using MBViews

First of all, when I worked with FluentSnippets, the slide worked.
It is difficult to output the MetaBox custom field to FluentSnippets, so I am trying to create a Swiper slider using MB Views.

My situation
1. Want to create a Swiper carousel slider
2. Write the code below in MB Views.
3. Data comes out, but slider doesn't work

Additional data setting information
*Settings Pages
ID : slider

*Custom Fields
Group ID : slider_info (Cloneable on)
- Single Image ID : slider_bg_image
- Text ID : slider_text

Template Code

  <div id="app">
    <!-- Carousel slider -->
    <div class="swiper carousel-slider">
      <div class="swiper-wrapper">
        
        {% for clone in site.slider.slider_info %}
          <div class="swiper-slide">
            <div class="swiper-carousel-animate-opacity">
                <img src="{{ clone.slider_bg_image.full.url }}" alt="">
                <div class="slide-content">
                  {{ clone.slider_text }}
                </div>
            </div>
        </div>
        {% endfor %}
          
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
  </div>

<!-- Custom EffectCarousel module -->
<script src="https://yellowgreen-gnat-744369.hostingersite.com/wp-content/fluent-snippet-storage/4-effect-carousel-min.php"></script>

CSS Code

#app {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slider {
    padding-bottom: 32px;
    max-width: 1200px;
}

.carousel-slider .swiper-slide {
    width: 520px;
    height: 380px;
    border-radius: 8px;
    background: #18212b;
    max-width: calc(100% - 48px);
}

.carousel-slider .swiper-carousel-animate-opacity {
    height: 100%;
}

.carousel-slider .swiper-pagination-bullets {
    bottom: 0;
}

.carousel-slider img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 8px;
}

.carousel-slider .slide-content {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    padding: 88px 16px 24px;
    box-sizing: border-box;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
    border-radius: 0 0 8px 8px;
}

.carousel-slider .slide-content h2 {
    margin: 0;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.1;
}

.carousel-slider .slide-content p {
    margin: 8px 0 0;
    opacity: 0.65;
    font-size: 14px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 640px) {

    .carousel-slider .swiper-button-next,
    .carousel-slider .swiper-button-prev {
        display: none !important;
    }
}

JavaScript Code

const swiper = new Swiper('.carousel-slider', {
    modules: [EffectCarousel],
    effect: 'carousel',
    carouselEffect: {
        opacityStep: 0.33,
        scaleStep: 0.2,
        sideSlides: 2,
    },
    grabCursor: true,
    loop: true,
    loopAdditionalSlides: 1,
    slidesPerView: 'auto',
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
    },

    autoplay: {
        delay: 3000,
    },
});

4-effect-carousel-min.php Code

/**
 * UI Initiative Carousel Slider
 *
 * Infinite 3D carousel slider
 *
 * https://uiinitiative.com
 *
 * Copyright 2024 UI Initiative
 *
 * Released under the UI Initiative Regular License
 *
 * September 12, 2024
 */

!function(e,s){"object"==typeof exports&&"undefined"!=typeof module?module.exports=s():"function"==typeof define&&define.amd?define(s):(e="undefined"!=typeof globalThis?globalThis:e||self).EffectCarousel=s()}(this,(function(){"use strict";return function({swiper:e,on:s,extendParams:t}){t({carouselEffect:{opacityStep:.33,scaleStep:.2,sideSlides:2}}),s("beforeInit",(()=>{if("carousel"!==e.params.effect)return;e.classNames.push(<code>${e.params.containerModifierClass}carousel</code>);const s={watchSlidesProgress:!0,centeredSlides:!0};Object.assign(e.params,s),Object.assign(e.originalParams,s)})),s("progress",(()=>{if("carousel"!==e.params.effect)return;const{scaleStep:s,opacityStep:t}=e.params.carouselEffect,a=Math.max(Math.min(e.params.carouselEffect.sideSlides,3),1),r={1:2,2:1,3:.2}[a],i={1:50,2:50,3:67}[a],o=e.slides.length;for(let l=0;l<e.slides.length;l+=1){const n=e.slides[l],c=e.slides[l].progress,f=Math.abs(c);let u=1;f>1&&(u=.3*(f-1)*r+1);const d=n.querySelectorAll(".swiper-carousel-animate-opacity"),p=c*u*i*(e.rtlTranslate?-1:1)+"%",m=1-f*s,y=o-Math.abs(Math.round(c));n.style.transform=<code>translateX(${p}) scale(${m})</code>,n.style.zIndex=y,n.style.opacity=f>a+1?0:1,d.forEach((e=>{e.style.opacity=1-f*t}))}})),s("resize",(()=>{e.virtual&&e.params.virtual&&e.params.virtual.enabled&&requestAnimationFrame((()=>{e.destroyed||(e.updateSlides(),e.updateProgress())}))})),s("setTransition",((s,t)=>{if("carousel"===e.params.effect)for(let s=0;s<e.slides.length;s+=1){const a=e.slides[s],r=a.querySelectorAll(".swiper-carousel-animate-opacity");a.style.transitionDuration=<code>${t}ms</code>,r.forEach((e=>{e.style.transitionDuration=<code>${t}ms</code>}))}}))}}));
//# sourceMappingURL=effect-carousel.min.js.map