The issue i'm experiencing is with the swipejs carousel. On load, the carousel function's perfectly, and the autoplay works as expected. The issue occurs after navigating to another route, in this case the about route, and coming back to the /home route.The autoplay stops working, and in addition, the p element that offers a brief description of each slide breaks, and appears as a column within the slide.The console error i recieve is:Swiper Loop Warning: The number of slides is not enough for loop mode, it will be disabled and not function properly. You need to add more slides (or make duplicates) or lower the values of slidesPerView and slidesPerGroup parameters
The original image:
After a quick navigation to the about route and back:
my current +page.svelte:
<script> import { register } from 'swiper/element/bundle'; register(); let images = [ { src: '/image1.jpg', alt: 'Image 1', detail: 'Random detail 1' }, { src: '/image2.jpg', alt: 'Image 2', detail: 'Random detail 2' }, { src: '/image3.jpg', alt: 'Image 3', detail: 'Random detail 3' }, { src: '/image1.jpg', alt: 'Image 3', detail: 'Random detail 4' }, { src: '/image2.jpg', alt: 'Image 5', detail: 'Random detail 5' }, { src: '/image3.jpg', alt: 'Image 5', detail: 'Random detail 6' }, // Add more slides as needed ];</script><swiper-container autoplay="true" navigation="true" slides-per-view="1" slidesPerGroup="1" speed="500" loop="false" css-mode="false"> {#each images as image}<swiper-slide><img src={image.src} alt={image.alt}><p class="detail-text">{image.detail}</p></swiper-slide> {/each}</swiper-container>My current layout
<script> import { onMount } from 'svelte'; import "@picocss/pico"; onMount(() => { const preloader = document.getElementById('preloader'); preloader.style.display = 'none'; });</script><svelte:head><link rel="stylesheet" href="/global.css"></svelte:head><div id="preloader"><div class="loader"></div></div><nav><a href="/">Home</a><div><a href="/movies">Movies</a><a href="/about">About</a></div></nav><slot />My current global.css:
swiper-container { height: 50vh; /* Set the height to 50% of the viewport height */ width: 100%; /* Make the container take up the full width */ } swiper-slide { height: 100%; /* Make the slides fill the height of the container */ width: 100%; /* Make the slides take up the full width */ position: relative; /* Make the slide a relative container for absolute positioning */ } swiper-slide img { object-fit: cover; /* Make the images cover the slide */ width: 100%; /* Make the images take up the full width */ height: 100%; /* Make the images take up the full height */ } .detail-text { position: absolute; /* Position the text absolutely within the slide */ top: 0; /* Align the text to the top of the slide */ right: 0; /* Align the text to the right of the slide */ margin: 10px; /* Add some margin for spacing */ color: white; /* Make the text white for visibility */ background: rgba(0, 0, 0, 0.5); /* Add a semi-transparent black background for visibility */ padding: 5px; /* Add some padding for spacing */ } /* Add this to your CSS */ #preloader { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; background-color: #fff; display: flex; justify-content: center; align-items: center; } /* NAV */ nav { display: flex; justify-content: space-between; padding: 1em; background-color: #333; color: #fff; } nav a { color: #fff; text-decoration: none; margin-right: 1em; } nav a:last-child { margin-right: 0; } /* HTML: <div class="loader"></div> */.loader { width: 50px; aspect-ratio: 1; display: grid; } .loader::before, .loader::after { content:""; grid-area: 1/1; --c:no-repeat radial-gradient(farthest-side,#25b09b 92%,#0000); background: var(--c) 50% 0, var(--c) 50% 100%, var(--c) 100% 50%, var(--c) 0 50%; background-size: 12px 12px; animation: l12 1s infinite; } .loader::before { margin: 4px; filter: hue-rotate(45deg); background-size: 8px 8px; animation-timing-function: linear } @keyframes l12 { 100%{transform: rotate(.5turn)} }I have tried the following:
- Turning off loop mode i.e loop="false"
- Changing the slides per view, note, my setting has always been 1
- Using slides per view and setting to 1
- Trying to do an auto refresh on load
- Changing the css setting: If i set the setting to TRUE, the detail element now fully appears distorted as shown above and also the AUTOPLAY feature fails.
- Tried increasing the number of slide via the array, was 3, up to 6
All this were done trying to rectify the problem mentioned above. But the problem still persists, whenever i navigate away, and navigate back, the distortion/breaking happens.
Any help or pointers would be highly appreciated.Thank you in advance.