在百里香弹簧靴中，动态旋转木马滑块不起作用答案

【问题标题】：In thymeleaf spring boot, dynamic carousel slider does not work在百里香弹簧靴中，动态旋转木马滑块不起作用
【发布时间】：2018-10-12 02:38:03
【问题描述】：

在我的 spring boot thymeleaf 中，以下代码是滑块不能正常工作。在图像中显示结果。该代码有什么问题。请检查一下。

    <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>

【问题讨论】：

标签： spring-boot thymeleaf

【解决方案1】：

我认为你不能在th:block 标签中添加class 属性。

<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>

【讨论】：

【解决方案2】：

哇，这太难了。但最终这对我有用。 “imageURls”是从 java 控制器传递到 html 文件的字符串列表。使用百里香在轮播中迭代。使用引导轮播。

        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item" th:each="url: ${imageUrls}" th:classappend ="${urlStat.first} ? active : ''">
                    <img class="d-block w-100" th:src="${url}" height="600px">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

【讨论】：