How add "active" inCarousel?
This is an open discussion with 2 replies, filed under XSLT.
Search
-
-
- plenaforma
- 27 Nov 14, 5:50 pm
- Comment #2
With <xsl:attribute> you can do that in combination with an <xsl:if>. For example give the first item the class active
<div class="item">
<xsl:attribute name="class">
<xsl:if test="position()=1">item active</xsl:if>
</xsl:attribute>
...
-
-
- cotiunix
- 30 Nov 14, 10:28 am
- Comment #3
via css is more elegant. use ol/ul element, is semantically correct when you have lists.
Create an account or sign in to comment.
this is html tempalte:
<div class="col-md-7"> <div class="carousel slide carousel-v1" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <img alt="" src="1.jpg"> <div class="carousel-caption"> <p>xxxxxx</p> </div> </div> <div class="item"> <img alt="" src="2.jpg"> <div class="carousel-caption"> <p>xxxxxx</p> </div> </div> <div class="item"> <img alt="" src="3.jpg"> <div class="carousel-caption"> <p>xxxxx</p> </div> </div> </div> <div class="carousel-arrow"> <a data-slide="prev" href="#myCarousel" class="left carousel-control"> <i class="fa fa-angle-left"></i> </a> <a data-slide="next" href="#myCarousel" class="right carousel-control"> <i class="fa fa-angle-right"></i> </a> </div> </div> </div>this is my xsl:
<div class="col-md-7"> <div class="carousel slide carousel-v1" id="myCarousel"> <div class="carousel-inner"> <xsl:for-each select="products-img/item"> <div class="item"> <img alt="" src="{$workspace}{image/@path}/{image/filename}" /> <div class="carousel-caption"> <p><xsl:value-of select="title"/></p> </div> </div> </xsl:for-each> </div> <div class="carousel-arrow"> <a data-slide="prev" href="#myCarousel" class="left carousel-control"> <i class="fa fa-angle-left"></i> </a> <a data-slide="next" href="#myCarousel" class="right carousel-control"> <i class="fa fa-angle-right"></i> </a> </div> </div> </div>how can i add "active" on the first
<div class="item">?