Ajouter un diaporama à Slick en utilisant ajax

Question

J'utilise donc Slick Carousel et j'y affiche une liste de produits de la base de données qui est limitée à 24 pour des raisons de performances. Mais je dois tous les montrer, j'ai donc créé une fonction afterChange et chaque fois que l'utilisateur a 2 diapositives avant la fin, ajax charge 24 autres produits et les ajoute à la fin du Slick à l'aide de la fonction slickAdd.

Tout fonctionne bien, mais lorsque la fonction slickAdd s'exécute, la largeur de la diapositive passe de 457 px à 451 px pour une raison quelconque et je peux voir une partie de la quatrième diapositive sur la diapositive actuelle. (J'en montre 3) Ensuite, si je clique à nouveau sur le bouton suivant, la largeur revient à 457px et tout fonctionne bien.

$('.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');
                }
            });
        }
    });
});

Qu'est-ce qui pourrait causer cela et comment l'éviter ?

Answer 1

Cela a résolu le problème pour moi

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