I'm encountering an issue with swiper while trying to create a specific layout. This layout requires the first image to be larger than the others. Initially, I attempted to achieve this with a single slider but it caused miscalculations in the animations and slider numbering.
As a solution, I opted for two separate sliders that are linked together: https://i.sstatic.net/EP8AY.png
The problem arises when the swiper thumbnail fails to load the next/previous loop item correctly; it only loads when manually dragged. Additionally, upon reaching the last item, it does not create the next/prev looped item.
To better illustrate this behavior, here's a GIF: https://i.sstatic.net/kLtpc.gif
For a live demonstration, please refer to this pen: https://codepen.io/giovancruz/pen/wvORgXL
// JavaScript code snippet
const slidesWrapper = document.querySelectorAll(".js-slides-wrapper");
if (slidesWrapper) {
// Iterate over each wrapper to set up sliders
slidesWrapper.forEach((wrapper) => {
const mainSliderElement = wrapper.querySelector(".js-main-slider");
const thumbnailSliderElement = wrapper.querySelector(
".js-thumbnail-slider"
);
let thumbnailSlider = null;
// Set up main slider
const mainslider = new Swiper(mainSliderElement, {
loop: true,
effect: "fade",
speed: 0
});
// Set up thumbnail slider
if (thumbnailSliderElement) {
thumbnailSlider = new Swiper(thumbnailSliderElement, {
loop: true,
spaceBetween: 20,
slidesPerView: 1,
navigation: {
prevEl: wrapper.querySelector(".js-prev"),
nextEl: wrapper.querySelector(".js-next")
}
});
}
// Connect both sliders
if (thumbnailSlider && mainslider) {
thumbnailSlider.controller.control = mainslider;
mainslider.controller.control = thumbnailSlider;
}
});
}// CSS Styles
html,
body {
width: 100%;
}
.slides-wrapper {
display: grid;
gap: 1.25rem;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Additional CSS styles omitted for brevity */
// External resources
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a283f293f2e773929291a6f746a7468">[email protected]</a>/reset.min.css">
// Include any other necessary external scripts or stylesheets.