bootstrap的幻灯片代码

cmswing 使用Bootstrap幻灯片代码

<div id="myNiceCarousel" class="carousel slide" data-ride="carousel" >

            {% topic data = "slider",limit= "5",position='2',issub="1"%}

            

        <!-- 圆点指示器 -->

        <ol class="carousel-indicators">

          {% set iarr = [0,1,2,3,4] %}

          {%for i in iarr %}

        

          <li data-target="#myNiceCarousel" data-slide-to="{{i}}" {%if i===0 %} class="active" {%endif%}></li>

        

          {%endfor%}

        

        </ol>

    

        <!-- 轮播项目 -->

        <div class="carousel-inner">

                

                {%for val in slider%}

                {%if val.model_id==4%} {% set pic = val.pics|strToArray%}{%else%}{%set pic = val.cover_id%}{%endif%}

                

          <div class="item {%if loop.index == 1  %}active{%endif%}">

            <img  src="{{pic|get_pic('m=2,w=777,h=400')}}" class="img-responsive">

            <div class="carousel-caption">

              <h3>{{val.title|truncate(20, true, "")|insert_flg("<br>",10)|safe}}</h3>

              <p>{{val.description|truncate(90, true, "...")|insert_flg("<br>",20)|safe}}</p>

            </div>

          </div>

        

        

          {%endfor%}

        

        </div>

    

        <!-- 项目切换按钮 -->

        <a class="left carousel-control" href="#myNiceCarousel" data-slide="prev">

          <span class="icon icon-chevron-left"></span>

        </a>

        <a class="right carousel-control" href="#myNiceCarousel" data-slide="next">

          <span class="icon icon-chevron-right"></span>

        </a>

      </div>


网站导航