如何在光滑的轮播上使用动态数据？

Question

我尝试了下面的代码。 我使用光滑的旋转木马 slider，来自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>