I am trying to build a timeline with Swiper and leader-line.js. I tried to use it with Swiper's on transition funcitons but it doesn't work properly. Here is my Leader-line code;
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',
});
}
I made an codepen example to make it clear.
https://codepen.io/Xteripus/pen/yLopBNp?editors=1010
I want to make lines stick to Swiper's container so when swiper element moves the line moves with it. Thanks in advance!
Anseki, developer of the plugin made this solution, hope it helps!
Here is 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);
});