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
Post a Comment