layui轮播图动态渲染数据

在 layui 轮播图中，可以使用 JavaScript 动态渲染数据。

首先，在 HTML 中定义好轮播图的结构，如下所示：

<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>

然后，在 JavaScript 中根据需要动态生成轮播图的数据，例如：

var data = [
  {content: '第一张图片', src: 'img/1.jpg'},
  {content: '第二张图片', src: 'img/2.jpg'},
  {content: '第三张图片', src: 'img/3.jpg'},
  {content: '第四张图片', src: 'img/4.jpg'},
  {content: '第五张图片', src: 'img/5.jpg'}
];

最后，利用 layui.carousel 模块进行动态渲染：

layui.use(['carousel'], function(){
  var carousel = layui.carousel;
  var $ = layui.jquery;

  //渲染轮播图
  carousel.render({
    elem: '#test1',
    width: '100%',
    height: '500px',
    arrow: 'hover',
    interval: 5000,
    anim: 'fade',
    autoplay: true,
    indicator: 'none',
    template: function(data){
      var content = '<div class="layui-carousel-item"><img src="'+data.src+'" alt="'+data.content+'"></div>';
      return content;
    }
  });

  //动态渲染数据
  var carouselData = $('#test1').next('.layui-carousel-indicator').find('li');
  for(var i = 0; i < data.length; i++){
    $(carouselData[i]).attr('lay-value', i);
    $(carouselData[i]).html(data[i].content);
  }
});

上述代码中，利用 layui.carousel.render 渲染轮播图，并使用 template 属性指定轮播图元素的模板。同时，利用 jQuery 对轮播图指示器进行动态渲染，实现了数据的动态展示。