ajaxを使用してスライドショーをSlickに追加する

Question

そこで私は Slick Carousel を使用し、パフォーマンス上の理由から 24 個に制限されているデータベースの製品リストを表示します。しかし、それらをすべて表示する必要があるので、afterChange 関数を作成し、ユーザーが最後までに 2 つのスライドを持っているたびに、ajax はさらに 24 個の製品をロードし、slickAdd 関数を使用して Slick の最後に追加します。

すべて正常に動作しますが、slickAdd 関数を実行すると、何らかの理由でスライドの幅が 457 ピクセルから 451 ピクセルに変更され、現在のスライドの 4 番目のスライドの一部が表示されます。 （私は 3 を表示しています）次に、もう一度「次へ」ボタンをクリックすると、幅は 457 ピクセルに戻り、すべてが正常に動作します。

$('.demo').slick({
        表示するスライド: 3、
        スクロールするスライド: 3、
        無限: false、
    });

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

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

        varloadWhen = currentスライド 6;

        if(loadWhen == slick.slideCount){
            console.log("ロードモア");
            $.ajax({
                タイプ:「POST」、
                URL: "/project/public/konfigurator",
                データ: {id: コンポーネント、from_column: slick.slideCount、リクエスト ID: "load_more"}、
                データ型: "json"、

                成功: 関数 (データ) {

                    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) "...";
                            } それ以外 {
                                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"><imgraggable="false" id="produkt-img" src="img/konfigurator/' コンポーネント '/' 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>gt;<span>Vý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_lockrate '</span></span></div><div class="spodna-cast"><div class="action-buttons"><a class="detail-button">詳細</a><a class="add-ボタン"> Vybrať<

Answer 1

これで問題は解決しました

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