Hi Beginner,

If you see the correct content but just not in the carousel — that's usually because the JavaScript or the CSS doesn't kick in. Which means that you're either not generating the correct markup, or you've inadvertently missed a class and/or id somewhere.

Assuming your slide images render correct (so no missing images etc.), there's reallyonly one thing that I could imagine coming out wrong in the code you've pasted - because XSLT will output well-formed XML by default, your prev and next links may be rendered as self-closing links, e.g.: <a class="left carousel-control" href="#heroSlider" data-slide="prev" /> which can totally break layout in some browsers...

To fix that, you can add an <xsl:comment/> instruction inside of each of them to prevent the XSLT processor from closing them in the output.

• Have you tried viewing the source (the real source - not the DOM Inspector's version) of the generated page? Does it look like it's supposed to?
• Are the Bootstrap CSS & JS files being loaded?
• If you inspect e.g. the #heroSlider element, is it getting any of its styles from the Bootstrap CSS file?

Hope this helps you pinpoint the problem(s)...

/Chriztian

Hi Christian! Thanks for your support.

I just managed to get it to Work:) I still have to solve a problem with the class item as you can se in the code. The first has to be class="active item" if it has to work. I am unsure how to solve it. It Works with a litle hardcoded item, but that is no good.. Now I need to get all items from umbraco and somehow add the class active to the first item. How should I do that???

 <xsl:variable name="sliderNode" select="$currentPage/parent::*/child::*[@level=1]"/>
<div class="slider">      

      <div class="container-fluid">
        <div id="heroSlider" class="carousel slide">
        <div class="carousel-inner"> 
          <div class="active item">
              <div class="hero-unit">
                <div class="row-fluid">
                  <div class="span7 marketting-info">
                    <h1>Some header text</h1>
                    <p>
                     Some text about the simple life...
                    </p>                       
                  </div>
                  <div class="span5">
                    <img src="img/placeholder.jpg" class="thumbnail"></img>
                  </div>
                </div>
              </div>
            </div>  

          <xsl:for-each select="$sliderNode/child::umediaSlider">
           <div class=" item">                    
            <div class="hero-unit"> 
              <div class="row-fluid">
                <div class="span7 marketting-info">
                  <h1>
                    <xsl:value-of select="@nodeName"/>
                  </h1>
                  <p>
                    <xsl:value-of select="teaserText" disable-output-escaping="yes"/>
                  </p>
                </div>
                <div class="span5">
                  <img src="{umbracoFile}" class="thumbnail" />
                </div>
              </div>
            </div>                           
           </div>   
          </xsl:for-each>
        </div> 
        <a class="left carousel-control" href="#heroSlider" data-slide="prev">‹</a>
        <a class="right carousel-control" href="#heroSlider" data-slide="next">›</a>
        </div>
      </div>          
  </div>

Hi,

Here's how to add a class to only the first item of a list:

<xsl:for-each select="$sliderNode/umediaSlider">
    <div class="item">
        <xsl:if test="position() = 1"><xsl:attribute name="class">item active</xsl:attribute></xsl:if>
        <div class="hero-unit">
            <!-- ... -->
        </div>
    </div>
</xsl:for-each>

As you can see, it's possible to override the attribute if a specific condition is met.

/Chriztian

Thanks a lot:) Problem is solved and you saved my evening:)

is working on a reply...