使用 jquery 和 slick js 很麻烦答案

【问题标题】：using jquery and slick js is a trouble使用 jquery 和 slick js 很麻烦
【发布时间】：2017-09-28 18:00:55
【问题描述】：

我用 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 ，但没有。

【问题讨论】：

“动态数据”是什么意思？具体是什么不工作？ “静态”版本与“动态”版本有何具体不同？
@David 在我的 JS 中看到，我使用 PHP for MySql 从 JSON 获取数据
那是什么数据？它与“静态”数据有何不同？此代码使用数据生成什么 HTML？它与“静态”数据的 HTML 有何不同？您需要提供调试信息。

标签： javascript jquery html twitter-bootstrap slick.js

【解决方案1】：

我认为您需要将动态图像源变量用双引号括在字符串中。

所以，试着改变这部分：

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

到这里

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

【讨论】：

【解决方案2】：

解决了

刚从 index 移到我的 js 中。谢谢大家

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

    });

【讨论】：