Use Jade to dynamically fill a bootstrap caraousel. Some issues on iteration -

Use Jade to dynamically fill a bootstrap caraousel. Some issues on iteration -

i trying create boostrap carousel using jade dynamically iterate through list of objects , display them in carousel.

my first question possible. secondly how might go accomplishing it.

here snippet of code trying generate list containing data-slide-to element of carousel :

10 - var n = 0 11 while n < newsarticles.length 12 if n == 0 13 li.active(data-target="#header-carousel",data-slide-to="n++") 14 else 15 li(data-target="#header-carousel",data-slide-to="n++")

i know bad code failing , finding reference on how accomplish if possible.

the error throwing is

"unexpected text " pointing line 13

any advice appreciate. give thanks you time in advance , if there more info can provide helpful please allow me know.

here total working illustration of dynamic carousel code:

extends layout block content div.container #header-carousel.carousel.slide(data-ride="carousel",data-interval="4000") ol.carousel-indicators -var n = 0 while n < newsarticles.length if n == 0 li.active(data-target="#header-carousel",data-slide-to=n) - n++ else li(data-target="#header-carousel",data-slide-to=n) - n++ .carousel-inner -var = 0 - newsarticle in newsarticles if == 0 .item.active img(src='#{newsarticle.imgurl}') .carousel-caption #{newsarticle.articletitle} -i++ else .item img(src='#{newsarticle.imgurl}') .carousel-caption #{newsarticle.articletitle} -i++ a.left.carousel-control(href="#header-carousel", data-slide="prev") span.icon-prev a.right.carousel-control(href="#header-carousel", data-slide="next") span.icon-next

the info associated code follows:

newsarticle = { articletitle: string, bodytext: string, editedon: { type: date, default: date.now }, imgurl: string });

i guess issue string have n++ increment value in quotes.

i guess can utilize variable , assign info attribute.

twitter-bootstrap-3 jade