python - how to use for loop with bootstrap carousel -


i have figured out how use bootstrap carousel problem want render featured stories in carousel. have carousel shows 3 slides, i'm trying have featured stories instead of 3 slides.

 <div class='carousel slide' id="mycarousel">        <ol class="carousel-indicators">         <li class="active" data-slide-to="0" data-target="#mycarousel"></li>         <li class="active" data-slide-to="1" data-target="#mycarousel"></li>         <li class="active" data-slide-to="2" data-target="#mycarousel"></li>       </ol>         <div class="carousel-inner">         <div class="item active" id="slide1">           <img src="http://i.imgur.com/sq691zo.jpg" >           <div class="carousel-caption">             <h4>hello</h4>             <p>hi you</p>           </div>         </div>          <div class="item" id="slide2">           <img src="http://i.imgur.com/zn4h51m.jpg" >            <div class="carousel-caption">             <h4>hello</h4>             <p>hi you</p>           </div>         </div>          <div class="item" id="slide3">           <img src="http://i.imgur.com/3ruwvog.jpg">            <div class="carousel-caption">             <h4>hello</h4>             <p>hi you</p>           </div>         </div>       </div>        <a class="left carousel-control" data-slide="prev" href="#mycarousel"><span class="icon-prev"></span></a>       <a class="right carousel-control" data-slide="next" href="#mycarousel"><span class="icon-next"></span></a> 

so tried that's not quite working. have

    {% in featuredstory %}     {{a.title}}     {{a.sub}}  <img src='{{a.get_featuredimage_url}}' class="img-rounded" alt="cinque terre" width="330" height="236"/>      {% endfor %} 

working fine, problem incorporate these carousel. 1 featured story works more one, 1 in top 1 in bottom.

here;s tried

<div class="row">   <div class="col-sm-8">     {% in featuredstory %}      <div class='carousel slide' id="mycarousel">        <ol class="carousel-indicators">         <li class="active" data-slide-to="0" data-target="#mycarousel"></li>         <li class="active" data-slide-to="1" data-target="#mycarousel"></li>         <li class="active" data-slide-to="2" data-target="#mycarousel"></li>       </ol>         <div class="carousel-inner">         <div class="item active" id="slide1">  <img src='{{a.get_featuredimage_url}}' class="img-rounded" alt="cinque terre" width="330" height="236"/>          <div class="carousel-caption">             <h4>    {{a.title}}</h4>             <p>     {{a.sub}} </p>           </div>         </div>           </div>       <a class="left carousel-control" data-slide="prev" href="#mycarousel"><span class="icon-prev"></span></a>       <a class="right carousel-control" data-slide="next" href="#mycarousel"><span class="icon-next"></span></a>  {% endfor %}      </div>   </div> 

you can use loop inside carousel-inner:

<div class="carousel-inner">     {% in featuredstory %}         <div class="item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">             <img src="{{ a.get_featuredimage_url }}" >             <div class="carousel-caption">                 <h4>{{ a.title }}</h4>                 <p>{{ a.sub}}</p>             </div>         </div>     {% endfor %} </div> 

make sure activate first item checking counter:

{% if forloop.counter == 1 %}active{% endif %} 

if there other information such class, title etc. can set in context on featuredstory , render here same title or url.


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -