zoukankan      html  css  js  c++  java
  • thinkphp标签实现bootsrtap轮播carousel实例

    thinkphp标签实现bootsrtap轮播carousel实例
    由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,
    使用volist标签在循环的同时可以取得下标(foreach,for标签实现不了)

    <div class="container">
    <!-- carousel -->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <volist name="bopic" id="xt">
    <li data-target="#carousel-example-generic" data-slide-to="{$i-1}" class="<if condition="$i eq 1 ">active</if>"></li>
    </volist>
    </ol>
    <div class="carousel-inner">
    <volist name="bopic" id="xt">
    <div class='item <if condition="$i eq 1 ">active</if>'>
    <img src="{$xt.page_bopic_image}" alt="{$xt.page_bopic_seo}"/>
    </div>
    </volist>
    </div>
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
    </div>
    <!-- /.carousel -->
    </div>

  • 相关阅读:
    2017/4/14 afternoon
    2017/4/14 morning补
    2017/4/13 afternoon
    2017/4/13 morning
    2017/4/12 afternoon
    2017/4/12 morning
    4.17上午
    4.14上午
    4.13下午
    4.13上午
  • 原文地址:https://www.cnblogs.com/zdz8207/p/thinkphp-bootsrtap-carousel.html
Copyright © 2011-2022 走看看