I am facing an issue with displaying a horizontal timeline that can be scrolled. Currently, I am only able to scroll the timeline when I resize the window page, and I cannot figure out why this is happening. I believe my code is correct, but I want the timeline to be scrollable without needing to resize the window. Is there a solution to fix this problem? Below is the code snippet for the swiper component.
<!--JAVASCRIPT CODE.-->
<
script src = "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c4b2b1a184f6eaf2eaf4">[email protected]</a>" > < /script> <
script src = "https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"
integrity = "sha256-4sETKhh3aSyi6NRiA+qunPaTawqSMDQca/xLWu27Hg4="
crossorigin = "anonymous" > < /script> <
script >
const data = [];
function dataFunction(dataTimeLine) {
for (var key in dataTimeLine) {
var value = dataTimeLine[key];
for (var i = 0; i < value.length; i++) {
data.push({
dateLabel: key,
title: value[i]
});
}
}
}
// Implementing the functionality for the timeline
new Vue({
el: "#app",
data: {
steps: data
},
mounted() {
var swiper = new Swiper(".swiper-container", {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".next-slide",
prevEl: ".prev-slide"
}
});
}
});
</script>