My slick slider was working fine, but I encountered an issue where the slider would apply before receiving a response from an API request. This is my first function:
fetchProducts () {
this.getProducts ().then(response => {
const products = response.data.data;
this.products = products;
/* console.log(this.products); */
let element = document.getElementById("sliderContainer");
element.classList.add("regular");
this.applySlider();
})
},
This is the apply slider function:
applySlider() {
if (this.products.length >= 1) {
$(".regular").slick({
//dots: true,
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true,
arrows:false,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
arrows:false,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
arrows:false,
}
}
]
});
}
}
What steps can I take to resolve this issue? Thank you in advance.