html原始碼：

<div id="scrollPic" class="carousel slide" data-scrollPic>
            <!-- 輪播（Carousel）指標 -->
   <ol class="carousel-indicators">
       <li data-target="#scrollPic" data-slide-to="0" class="active"></li>
       <li data-target="#scrollPic" data-slide-to="1"></li>
       <li data-target="#scrollPic" data-slide-to="2"></li>
   </ol>

            <!-- 輪播（Carousel）專案 -->
   <div class="carousel-inner" >
        <div class="item active">
           <a href="#"><img class="img-scroll" src="/images/1.jpg" alt="First slide"></a>
        </div>
        <div class="item ">
           <a href="#"><img class="img-scroll" src="/images/2.jpg" alt="First slide"></a>
       </div>
       <div class="item ">
          <a href="#"><img class="img-scroll" src="/images/3.jpg" alt="First slide"></a>
       </div>

  </div>
            <!-- 輪播（Carousel）導航 -->
  <a class="left carousel-control" href="#scrollPic" role="button" data-slide="prev">
      <span class="iconfont chevron-left" aria-hidden="true">&#xe601;</span>
      <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#scrollPic" role="button" data-slide="next">
       <span class="iconfont chevron-right" aria-hidden="true">&#xe627;</span>
       <span class="sr-only">Next</span>
  </a>
</div>
 

要實現的效果：

圖片滾動，左右箭頭可點選，下面原點跟隨圖片滾動

用程式碼開始實現：

html頁面程式碼：

 <div id="scrollPic" class="carousel slide "  data-scrollPic>
            <!-- 輪播（Carousel）指標 -->

</div>

模版引擎程式碼：

<!--輪播圖-->
<xmp id="scrollTemp" hidden>

    <%var length=list.length;if(length>5){length=5;}%>
    <ol class="carousel-indicators">
        <%for(var i=0; i< length; i++){if(i==0){%>
        <li data-target="#scrollPic" data-slide-to="0" class="active"></li>
        <%}else{%>
        <li data-target="#scrollPic" data-slide-to="<%=i%>" ></li>
        <%}}%>
    </ol>
    <!-- 輪播（Carousel）專案 -->
    <div class="carousel-inner" >
        <%for(var i=0; i< length; i++){%>
        <div class="item <%if(i==0){%>active<%}%>">
            <a href="javascript:window.open('<%=list[i].href%>')"><img class="img-scroll" src="<%=list[i].coverImageUrl%>" alt="First slide"></a>
        </div>
        <%}%>

    </div>

    <%if(length>1){%>
    <!-- 輪播（Carousel）導航 -->
    <a class="left carousel-control" href="#scrollPic" role="button" data-slide="prev">
        <span class="iconfont chevron-left" aria-hidden="true">&#xe601;</span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#scrollPic" role="button" data-slide="next">
        <span class="iconfont chevron-right" aria-hidden="true">&#xe627;</span>
        <span class="sr-only">Next</span>
    </a>
<%}%>

</xmp>
 

js程式碼：

//初始化輪播圖
window.resource("cmsApiArticleList", {columnCode: 'banner'}, function (data) {
    var temp = _.template($("#scrollTemp").text());
    $('[data-scrollPic]').html(temp(data));
}, false);