Description
Hi,
Ia m hitting issues with Glide when i mix the width of images in a galllery.
This is the render on the page.
Scratching my head trying to understand how to compress the gaps and present images consistently i.e. no gaps and without overlapping.
When all images are the same dimensions it is as required a continuous line of images or with the desired spacing between images. mixing them and the gap appears to be overriden / corrupted.
If any one here has thoughts on how to overcome this one I am grateful I can't be the first geezer to attempt this
Source extracts and sample images below
:-)
Scripts Styles and HTML
JS.
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);
});
**HTML EXTRACT **
<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>
**CSS EXTRACT **
.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 */
}
Dimensions @ 100% 800 (w) x 800 (h) pixels
Dimensions @ 100% 1427 (w) x 800 (h) pixels
Dimensions @ 100% 800 (w) x 800 (h) pixels
Dimensions @ 100% 800 (w) x 800 (h) pixels