如何在 slick carousel 上使用动态数据？

Question

我试过下面的代码。我使用光滑的旋转木马滑块，来自 https://kenwheeler.github.io/slick/

下面是我的代码片段。

var data = {
  homebanner: [
  {
      id: "001",
      link: "link-01",
      imgurl: "/img/promo/banner/homebanner_000000_07242020.png",
      text: 'ABC',
      seo: ''
  },
  {
      id: "002",
      link: "link-02",
      imgurl: "/img/promo/banner/homebanner_000000_07242021.png",
      text: '123',
      seo: ''
  }]
};
$.each(data.homebanner, function () {
    $('#HomeBanner').slick('slickAdd', '<div><src=\">' + homebanner.imgurl + '\"/></div>');
});
$('#HomeBanner').slick(HomeSliderSetting());

<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js">
</script>
<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div id="HomeBanner">
</div>

Answer 1

我已经解决了问题

var data = {        
        homebanner: [
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000000_07242020.png",
                text: 'ABC',
                seo: ''
            },
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000001_07242020.png",
                text: 'ABC',
                seo: ''
            },
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000002_07242020.png",
                text: 'ABC',
                seo: ''
            },
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000003_07242020.png",
                text: 'ABC',
                seo: ''
            },
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000004_07242020.png",
                text: 'ABC',
                seo: ''
            },
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000005_07242020.png",
                text: 'ABC',
                seo: ''
            },
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000006_07242020.png",
                text: 'ABC',
                seo: ''
            },
            {
                id: "WomenFashion",
                link: "javascript:void(0)",
                imgurl: "/img/promo/home_banner/homebanner_000007_07242020.png",
                text: 'ABC',
                seo: ''
            }]
    };
    $('#HomeBanner').slick(HomeSliderSetting());
    $.each(data.homebanner, function (index, data) {
        var html = ''
        html += '<div class="img-wrapper">';
        html += '<img alt="';
        html += this.text;
        html += '" id = "';
        html += this.id;
        html += '" src = "';
        html += this.imgurl;
        html += '"/></div>';
        $('#HomeBanner').slick('slickAdd', html);
    });
    
    function HomeSliderSetting() {
        return {
            dots: true,
            lazyLoad: 'progressive',
            autoplay: true,
            autoplaySpeed: 2500,
        }
    }

<link href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/>

<div id="HomeBanner"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

如何在 slick carousel 上使用动态数据？

How to use dynamic data on slick carousel?

javascript

html

jquery

web

slick.js