使用 jquery 和 slick js 很麻煩

Question

我用 bootstrap、jquery 和 slick 構建了一個頁面……但是我在生成動態數據時遇到了問題……如果我使用靜態數據，工作正常。

我的js

$.post(api + "/api.php?c=newslide", function (response) {
        var arr = $.parseJSON(response);
        var trHTML = '';
        $.each(arr, function (ix, nilai) {

            trHTML += '<li><div class="post-style2" itemscope itemType="http://schema.org/BlogPosting"><div class="post-thumb2"><img itemprop="image" src='+arr[ix].img+' alt=""/></div><div class="post-detail2"><div class="cat"><a itemprop="url" href="#" title="">'+arr[ix].category+'</a></div><h3 itemprop="headline"><a itemprop="url" href="#" title="">'+arr[ix].title+'</a></h3><div class="date"><ul><li><a itemprop="datePublished" content="December-29-2014" href="#" title="">'+arr[ix].publish_date+'</a></li></ul></div><p itemprop="description">'+arr[ix].content+'</p></div></div></li>'

        });
        $('#sliderfirst').html(trHTML);

    });

並在 HTML

<div class="slider-post">
<ul id="sliderfirst" class="slider-for">
</ul>
</div>

如果我使用靜態數據/在 HTML 上手動輸入，則幻燈片正在工作，但是，如果我使用動態數據，幻燈片將停止工作，並水平移動..（如果使用 Vue.js 生成/獲取數據，則相同）。

檢查 console.log ，但沒有。

Answer 1

我認為您需要將動態圖像源變量用雙引號括在字符串中。

所以，嘗試改變這部分：

'...<img itemprop="image" src=' + arr[ix].img + ' alt=""/>...'

對此

'...<img itemprop="image" src="' + arr[ix].img + '" alt=""/>...'

Answer 2

解決了

剛剛從索引移動到我的 js。 謝謝大家

$('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      slide: 'li',
      fade: false,
      asNavFor: '.slider-nav'

    });