Gaps and mixed format images

document.addEventListener("DOMContentLoaded", function () {
  const imageContainer = document.querySelector(".glide__slides");

  let imageNames = [];
  for (let i = 100; i <= 163; i++) {
    imageNames.push(`Galleries/${i}.jpg`); // Adjust path if needed
  }

  // Shuffle image order if needed
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
  }

  shuffleArray(imageNames); // Randomize images

  // Append images to container
  imageNames.forEach(src => {
    const slide = document.createElement("li");
    slide.classList.add("glide__slide");

    const img = document.createElement("img");
    img.src = src;
    img.loading = "lazy";

    slide.appendChild(img);
    imageContainer.appendChild(slide);
  });

  // Initialize Glide **without fixed perView**
  setTimeout(() => {
    new Glide(".glide", {
      type: "carousel",
      autoplay: 3000,
      perView: 5, // Show 5 images at a time
      focusAt: "center",
      gap: 0,
      hoverpause: true,
    }).mount();
  }, 500);
}); 

  <link rel="stylesheet" href="dist/css/main.css" />
    <!-- Glide.js Styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css">

    <!-- Glide.js Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>
</head>

<section id="gallery" class="headshots-gallery" data-scroll-section>
            <div data-scroll data-scroll-speed="2">
                <div class="glide">
                    <div class="glide__track" data-glide-el="track">
                        <ul class="glide__slides"></ul> <!-- Will be filled dynamically -->
                    </div>

                    <!-- Navigation -->
                    <div class="glide__arrows" data-glide-el="controls">
                        <button class="glide__arrow glide__arrow--left" data-glide-dir="<">⬅️</button>
                        <button class="glide__arrow glide__arrow--right" data-glide-dir=">">➡️</button>
                    </div>
                </div>
            </div>
        </section>
<script src="scripts/glide_local.js"></script>
</body>

</html>

.glide__slides {
  display: flex;
  align-items: center; /* Align images correctly */
  gap: 0; /* No spacing between images */
  overflow:hidden;
}

.glide__slide img {
  height: 450px; /* Maintain uniform height */
  width: auto; /* Allow variable widths */
  object-fit: contain; /* Prevent stretching or cropping */
}