Tengo una lista de tarjetas de blog que he convertido a un carrusel usando Splide . Cada vez que cambio a otra página, quiero eliminar el objeto Splid existente. Quiero usar acciones Svelte para lograr esto, pero no puedo hacerlo.
<script> const splideAction = async (node, props)=>{ const module = await import("@splidejs/splide"); const Splide = module.default; const splide_css = await import("@splidejs/splide/dist/css/splide.min.css"); const carousel = new Splide(".splide",{ perPage:3, type:"loop", rewind: true, permove: 1, autoplay: true, breakpoints: { 750: { perPage: 1 }, 800:{ perPage: 2 } } }).mount(); return { updated(){ carousel.update(); console.log("Updated") }, destroy(){ carousel.destroy(); console.log("destroy") } } } </script> <div class="splide" use:splideAction> <div class="splide__track" > <div class="splide__list" > {#each [...metadata.related_articles] as article (article.id)} <div class="splide__slide flex"><Card title = "{article.title}" date = "{article.date}" slug = "{article.slug}" category= "{article.category}" image = "{article.image}"/></div> {/each} </div> </div> </div>Cuando hago clic en la tarjeta para otras publicaciones de blog, genero un nuevo carrusel y el anterior todavía está allí. ¿Cómo lo elimino?
Unas pocas cosas:
<svelte:head> .carousel.update() . De todos modos, no creo que necesite devolver un método de "actualización" de su acción, ya que su acción no está tomando ningún parámetro. El método de actualización está destinado a reaccionar al cambio de los parámetros de su acción.mount , no al constructor. Debido a esto, se está llamando a destroy en la variable incorrecta. Prueba algo como esto: const carousel = new Splide(); carousel.mount();Si bien a su pregunta le falta algo de contexto, el siguiente componente parece funcionar. Simplifiqué la plantilla ya que no tengo acceso a los datos del artículo. Puedes verlo en vivo en el Svelte REPL . Agregué un botón para eliminar el componente para que pueda ver cómo se destruye el carrusel.
<script> import Splide from '@splidejs/splide'; function carousel(node) { const splide = new Splide(node, { perPage: 3, type: "loop", rewind: true, permove: 1, autoplay: true, breakpoints: { 750: { perPage: 1 }, 800: { perPage: 2 } } }); splide.mount(); return { destroy: () => { splide.destroy(); console.log('destroyed'); } } } </script> <svelte:head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@3.0.9/dist/css/splide.min.css"> </svelte:head> <div class="splide" use:carousel> <div class="splide__track"> <ul class="splide__list"> <li class="splide__slide">Slide 01</li> <li class="splide__slide">Slide 02</li> <li class="splide__slide">Slide 03</li> </ul> </div> </div> <style> li { height: 300px; background: lightblue; } </style>