tiny-slider Adding items to slider from Axios.

Adding items to slider from Axios.

Open ScottDurkin opened this issue 2 years ago • 1 comments

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: ['&#8592;', '&#8594;'],
    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