Adding items to slider from Axios.
ScottDurkin opened this issue · comments
Scott commented
Issue description: When adding items to the container (after the page has loaded) the container does not work. I have tried the rebuild function and no luck. Please help.
Demo link/slider setting: Settings:
var slider = tns({
container: '.clientslider-2',
loop: true,
autoplay: true,
mouseDrag: true,
controls: false,
navPosition: "bottom",
nav: false,
autoplayTimeout: 4000,
speed: 900,
gutter: 50,
animateIn: "fadeIn",
animateOut: "fadeOut",
controlsText: ['←', '→'],
autoplayButtonOutput: false,
responsive: {
992: {
gutter: 50,
items: 10
},
}
});
var searchDialog = new Vue({
el: "#SearchDialog",
data: {
HelloWorld: "",
timeout: null,
SearchResults: []
},
methods:
{
OnTypeSearch: function () {
// clear timeout variable
clearTimeout(this.timeout);
var vm = this;
this.timeout = setTimeout(function () {
if (vm.HelloWorld !== "") {
axios.get("/find?find=" + vm.HelloWorld).then(
function (res) {
var data = res.data.results;
console.log(data);
data.forEach(element => vm.SearchResults.push(element));
slider.rebuild();
}).catch({
});
}
}, 1000);
},
}
})
Tiny-slider version: 2.9.2
Browser name && version: Chrome - 100.0.4896.127
OS name && version: Windows 10 - 10.0.19044 Build 19044
Yudistira commented
hey, did you solve the problem? i got same problem here
Scott commented
hey, did you solve the problem? i got same problem here
Sorry I missed this but I am going to be honest. I can't remember why I made this post haha
Scott commented
Going to close as it seems irrelevant now.
Pixsa commented
relevant.