在百里香弹簧靴中,动态旋转木马滑块不起作用
Posted
技术标签:
【中文标题】在百里香弹簧靴中,动态旋转木马滑块不起作用【英文标题】: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>
【问题讨论】:
【参考方案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" >
</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>
【讨论】:
以上是关于在百里香弹簧靴中,动态旋转木马滑块不起作用的主要内容,如果未能解决你的问题,请参考以下文章