使用 Bootstrap 轮播实现 layui 模板中的图片轮播

<script type="text/html" id="imageTpl">
  <div id="imageCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      {{# layui.each(d.images.split(','), function(index, item){ }} 
      <li data-target="#imageCarousel" data-slide-to="{{index}}" class="{{index === 0 ? 'active' : ''}}"></li>
      {{# }); }} 
    </ol>
    <div class="carousel-inner">
      {{# layui.each(d.images.split(','), function(index, item){ }} 
      <div class="carousel-item {{index === 0 ? 'active' : ''}}">
        <img src="{{ item }}" alt="图片" style="width: 50px;height: 50px;">
      </div>
      {{# }); }} 
    </div>
    <a class="carousel-control-prev" href="#imageCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#imageCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</script>