Hi All

I have an xslt that works with the image, but I have added text and I have two problems:

1. The text is in the wrong place it should be on the right of the corresponding slide but seems to have it's own slide

2.  It is only showing text for the first slide even though I have populated all of them.

Any help would be greatly appreciated

Thanks

My xslt is:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<xsl:stylesheet 
    version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
    xmlns:msxml="urn:schemas-microsoft-com:xslt"
    xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" 
    exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

    
    <xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>
    

<xsl:template match="/">
  <xsl:value-of select="umbraco.library:RegisterJavaScriptFile('cycle', '/js/jquery.cycle/jquery.cycle.all.min.js')"/>
     <script type="text/javascript">
$(document).ready(function() {
    $('#Carousel').cycle({
        fx: 'scrollHorz' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            
    });
});
    $(document).on("click", ".nextImg", function() {
   callNextInCycle();
});
</script>    
    <div id="CarouselContainer">
     <div id="Carousel"> 
    <xsl:for-each select="$currentPage/*[starts-with(name(),'slide')]">
        <img>
            <xsl:attribute name="src">
                <xsl:value-of select="umbraco.library:GetMedia(., 0)/umbracoFile" />
            </xsl:attribute>
        </img>
        
        <xsl:variable name="text" select="$currentPage/*[starts-with(name(),'text')]" />
        <div id="CarouselPanel">
            <p> <xsl:value-of select="$text"/></p>    
        </div>
    </xsl:for-each>         
     
        </div>
         <div id="nav">
            <div><a class="prevImg" href="#"><img src="images/prev.png" /></a></div>
            <div><a class="nextImg" href="#"><img src="images/next.png" /></a></div>
         </div>

    </div>
 
  </xsl:template>

</xsl:stylesheet>

and my css is:

#CarouselContainer{background:#fff; float:left; border:1px solid #ccc;width:990px; height:345px;padding:2px 2px;}
#Carousel{float:left; width:988px; height:341px;padding:0;}
#CarouselPanel{width:210px; height:240px; background:transparent; color:000; float:right; overflow:hidden;}
#Carousel p {color:#000; width:200px; margin:0 auto;}
#Carousel img {float:left;border: none;z-index:3;width:695px;} 

#nav {position:relative; float:right; margin-top:-35px; height:33px; width:75px; padding:2px;}
#nav .prevImg{float:left; width:35px; padding:1px 1px 1px 1px; z-index:5;}
#nav .nextImg{float:left; width:35px; padding:1px 1px 1px 1px; z-index:5;}