How to display photos using swiper

Question

i wand to show my photos like this: but my code doesn't work, this is my code using wordpress dynamic content :

<section class="section-showroom">
    <div class="container heading">
        <p class="desc">NOS RÉALISATIONS</p>
        <!-- <h2 class="title">Excellence en travaux réalisés</h2> -->
    </div>
    <div class="showroom-content">
        <div class="swiper gallery-img">
            <div class="slide7 swiper-wrapper">
                <?php
                    $args = array(
                        'post_type' => 'realisation',
                        'posts_per_page' => 1,
                    );

                    $loop = new WP_Query($args);

                    if ($loop->have_posts()) {

                        while ($loop->have_posts()) {
                        $loop->the_post();

                    $title = get_field('title');
                    $description = get_field('description');
                    $galerie_realisation = get_field('galerie_realisation');
                    // var_dump($galerie_realisation[0]);
                    // $image_id = $galerie_réalisation['ID'];

                    if ($galerie_realisation):
                ?>

                    <div class="slide slider-show swiper-slide">
                        <?php 
                            $image = $galerie_realisation[0];
                            // $index = $image['ID'];
                        ?>
                            
                            <img src="<?= esc_url($image['sizes']['showroom_size']); ?>" alt="<?= esc_attr($image['alt']); ?>">
                    </div>
                    
                <?php endif;
                }
                }

                wp_reset_postdata();

                ?>
            </div>
        </div>

        <div class="showroom-bar">
            <img src="<?= get_template_directory_uri() . '/images/frame3.png' ?>">
        </div>
        <div class="inner-showroom">
            <div class="container">
                <div class="row align-items-end">
                    <div class="col-lg-6 order-lg-1 order-2">
                        <div class="showroom-item">
                            
                            <?php if ($title): ?>
                                <h3> <?= $title; ?></h3>
                            <?php endif; ?>
                            
                            <?php if ($description): ?>
                                <p>
                                    <?= $description; ?>
                                </p>
                            <?php endif; ?>
                        </div>
                    </div>
                    <div class="col-lg-6 order-lg-2 order-1 swiper gallery-thumbs">
                        <div class="block-showroom swiper-wrapper">
                            <?php 

                            $args = array(
                                'post_type' => 'realisation',
                                'posts_per_page' => 5,
                            );

                            $loop = new WP_Query($args);

                            if ($loop->have_posts()) {

                                while ($loop->have_posts()) {
                                $loop->the_post();
                                    $title = get_field('title');
                                    $description = get_field('description');
                                    $galerie_realisation = get_field('galerie_realisation');
                                    
                                    if (($galerie_realisation) && ($title) && ($description)):
                            ?>
                            <div class="showroom-list swiper-slide">
                                <?php
                                $image = $galerie_realisation[0];
                                $index = $image['ID'];

                                ?>

                                <div class="showroom-box mb-3">
                                    <!-- <div class="showroom-img swiper-slide"> -->
                                        <img src="<?= esc_url($image['sizes']['miniature_size']); ?>"
                                            class="box-img" alt="<?= esc_attr($image['alt']); ?>" data-slide-index="<?= $index; ?>">
                                    <!-- </div> -->
                                    <div class="content-box">
                                        <h3> <?= $title; ?></h3>
                                        <p><?= $description; ?></p>
                                    </div>
                                </div>
                            </div>
                            <?php endif; ?>
                            <?php
                                }
                            }
                            wp_reset_postdata();
                            ?>
                             
                            <div class="btn-item">
                                <a href="<?= get_permalink(get_page_by_path('realisations')); ?>" class="btn btn-info">
                                    <span>Découvrez toutes nos réalisations</span><i
                                        class="fa-solid fa-arrow-right fa-xs"></i></a>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

and this is my swipe code :

jQuery(document).ready(function() {
var galleryThumbs = new Swiper('.gallery-thumbs', {
  loop: false,
  spaceBetween: 10,
  slidesPerView: 5,
  direction: 'vertical',
  freeMode: true,
  height: '700px',
  // autoHeight: true,
  // watchSlidesVisibility: true,
  watchSlidesProgress: true,
});

var galleryImg = new Swiper('.gallery-img', {
  loop: false,
  spaceBetween: 10,
  height: '1000px',
  thumbs: {
    swiper: galleryThumbs,
  }
});

})

I want to get a slide show of my list images, which is 5 images generated with the last posts, the problem I have with my swiper code, it doesn't work even if the swiper classes is generated and I don't know what is the problem, I tried so many things before to finally put my question here, I hope to have some help please.

When I click on an image of the list of images it doesn't appear on the background image and I receive no errors, i can't understand what is the problem ?!