Estoy tratando de construir una línea de tiempo con Swiper y leader-line.js. Intenté usarlo con las funciones de transición de Swiper, pero no funciona correctamente. Aquí está mi código de línea guía;
const items = document.querySelectorAll(".circle"); const options = { startSockets: ["top", "bottom", "right", "bottom", "left", "right"], endSockets: ["top", "bottom", "top", "top", "top", "top"] }; for(let i = 0; i < items.length - 1; i++) { new LeaderLine(items[i], items[i + 1], { startPlug: "behind", endPlug: "behind", size: 2, dash: true, startPlugSize: 3, endPlugSize: 1, startSocket: "right", endSocket: "left", color: "#fb8c00", path: 'straight', }); }Hice un ejemplo de codepen para que quede claro.
https://codepen.io/Xteripus/pen/yLopBNp?editors=1010
Quiero hacer que las líneas se adhieran al contenedor de Swiper para que cuando el elemento Swiper se mueva, la línea se mueva con él. ¡Gracias por adelantado!
Anseki, desarrollador del complemento, creó esta solución, ¡espero que ayude!
Aquí está js:
$(".circle").each(function (index, el) { $(el).css({ top: Math.random() * ($(".swiper-slide ").height() - 300 - $(this).height()) }); }); const items = document.querySelectorAll(".circle"); const options = { startSockets: ["top", "bottom", "right", "bottom", "left", "right"], endSockets: ["top", "bottom", "top", "top", "top", "top"] }; const lines = []; for (let i = 0; i < items.length - 1; i++) { lines.push( new LeaderLine(items[i], items[i + 1], { startPlug: "behind", endPlug: "behind", size: 2, dash: true, startPlugSize: 3, endPlugSize: 1, startSocket: "right", endSocket: "left", color: "#fb8c00", path: "straight" }) ); } swiper.on("sliderMove", () => { lines.forEach((line) => { line.position(); }); }); let req; function position(stop) { cancelAnimationFrame(req); lines.forEach((line) => { line.position(); }); if (stop !== true) { req = requestAnimationFrame(position); } } swiper.on("slideChangeTransitionStart", position); swiper.on("slideResetTransitionStart", position); swiper.on("slideChangeTransitionEnd", () => { position(true); }); swiper.on("slideResetTransitionEnd", () => { position(true); });