在 thymeleaf spring boot 中，动态轮播滑块不起作用

In my spring boot thymeleaf, this following code is slider does not work well.Show the result in image. What wrong with in that code. Please Check it out.

    <ol class="carousel-indicators">

     <th:block th:each="picture, iterstat : ${package.picture}"> 
      <li  data-target="#jsaAboutCarousel" th:attr="data-slide-to=${iterstat.index}" th:class="${iterstat.index}== 0  ? 'active':''"></li>

      </th:block>
    </ol>

    <!-- Wrapper for slides -->



    <div class="carousel-inner">

      <div th:each="picture, iterstat : ${package.picture}">  

      <th:block th:class="${iterstat.index}== 0  ? 'item':'item active'">
        <img th:src="@{${baseurl}+'/backend/getPackageImagePath/' + ${picture}}" class="img-responsive" />

    </th:block>
      </div>

    </div>


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#jsaAboutCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#jsaAboutCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>

</div>

我认为你不能添加class属性在th:block tag.

<div class="carousel-inner">
    <div th:each="picture, iterstat : ${package.picture}">
        <th:block th:class="${iterstat.index}== 0  ? 'item':'item active'">
            <img th:src="@{${baseurl}+'/backend/getPackageImagePath/' + ${picture}}" class="img-responsive" />
        </th:block>
    </div>
</div>

尝试这样改变。

<div class="carousel-inner">
    <div th:each="picture, iterstat : ${package.picture}" th:class="${iterstat.index}== 0  ? 'item':'item active'">
        <img th:src="@{${baseurl}+'/backend/getPackageImagePath/' + ${picture}}" class="img-responsive" />
    </div>
</div>