Search

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"> ?

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>
...

via css is more elegant. use ol/ul element, is semantically correct when you have lists.

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details