在百里香弹簧靴中，动态旋转木马滑块不起作用 [英] In thymeleaf spring boot, dynamic carousel slider does not work

查看：25
本文介绍了在百里香弹簧靴中，动态旋转木马滑块不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在我的 spring boot thymeleaf 中，以下代码是滑块无法正常工作.在图像中显示结果.这段代码有什么问题.请检查一下.

 
    <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><!-- 幻灯片包装器--><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>

<!-- 左右控件--><a class="left carousel-control" href="#jsaAboutCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">上一个</span></a><a class="right carousel-control" href="#jsaAboutCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">下一步</span></a>

解决方案

我不认为你可以在 th:block 标签中添加 class 属性.

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

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>

解决方案

I don't think you can add class attribute in 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>

Try changing like this.

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

这篇关于在百里香弹簧靴中，动态旋转木马滑块不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆