Fügen Sie Slick eine Diashow mit Ajax hinzu

Question

Also verwende ich Slick Carousel und zeige darin eine Liste von Produkten aus der Datenbank an, die aus Leistungsgründen auf 24 begrenzt ist. Aber ich muss sie alle anzeigen, also habe ich eine afterChange-Funktion erstellt und jedes Mal, wenn der Benutzer 2 Folien vor dem Ende hat, lädt Ajax weitere 24 Produkte und fügt sie mithilfe der slickAdd-Funktion am Ende des Slick hinzu.

Alles funktioniert gut, aber wenn die slickAdd-Funktion ausgeführt wird, ändert sich die Folienbreite aus irgendeinem Grund von 457 Pixel auf 451 Pixel und ich kann einen Teil der vierten Folie auf der aktuellen Folie sehen. (Ich zeige 3) Wenn ich dann erneut auf die Schaltfläche „Weiter“ klicke, beträgt die Breite wieder 457 Pixel und alles funktioniert einwandfrei.

$('.demo').slick({
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: false,
    });

    $('.demo').on('afterChange', function(event, slick, currentSlide, nextSlide){

        var komponent = $(".komponent-container.active").attr("id");

        var loadWhen = currentSlide+6;

        if(loadWhen == slick.slideCount){
            console.log("loadmore");
            $.ajax({
                type: "POST",
                url: "/project/public/konfigurator",
                data: {id: komponent, from_column: slick.slideCount, requestid: "load_more"},
                dataType: "json",

                success: function (data) {

                    var data_parser = JSON.parse(data)[0];

                    if (data_parser.length > 0) {

                        var html = '';
                        for (i = 0; i < data_parser.length; i++) {
                            var produkt_nazov = 0;
                            if (data_parser[i].produkt.length > 45) {
                                produkt_nazov = data_parser[i].produkt.substring(0, 45) + "...";
                            } else {
                                produkt_nazov = data_parser[i].produkt;
                            }

                            html += '<div><div class="item-container"><div class="container-wrapper"><div class="produkt-container"><div class="item-left"><div class="item-image-wrapper"><img draggable="false" id="produkt-img" src="img/konfigurator/'+komponent+'/' + data_parser[i].produkt + '/1.jpg" alt="" /></div><div class="cena">' + data_parser[i].cena + ' €</div></div><div class="item-right"><div class="item-info"><span class="item-title">' + produkt_nazov + '</span><span class="item-description"><span>Výrobca čipu - ' + data_parser[i].vyrobca_cipu + '</span><span>Veľkosť pamäte - ' + data_parser[i].vram_size + '</span><span>Typ pamäte - ' + data_parser[i].vram_type + '</span><span>Frekvencia jadra - ' + data_parser[i].gpu_memory_clockrate + '</span></span></div><div class="spodna-cast"><div class="action-buttons"><a class="detail-button">Detail</a><a class="add-button">Vybrať</a></div></div></div></div></div></div></div>';
                        }

                        $(".demo").slick('slickAdd', html);
                        console.log("add");
                    }
                },

                error: function (result) {
                    alert('error');
                }
            });
        }
    });
});

Was könnte die Ursache dafür sein und wie kann man es verhindern?

Answer 1

这为我解决了这个问题

$(".demo")[0].slick.setPosition();