Custom Slider Not Sliding involves XSL

Question

I am working on making a jQuery slider and I can't seem to make the slider actually slide. The arrows are working because a class that I added is being added but it is not causing the images to slide over. The images are being drawn to the slider and appear correctly with the images falling off of the slider on the right. What is wrong with my code that it is not sliding? Any help is very appreciated Here is my XSL (had to take off the first two xsl tags for some reason for this to display. let me know if you need them):

   <xsl:param name="StyleNode" />
<xsl:if test="$Node/RelatedProducts_Expanded != ''">
  <div class="relatedProducts siteBounds">
    <div class="wrapper">
      <h5>Related Products</h5>
      <div class="slider sliderRelatedProducts">
        <div class="leftarrow" >
          <i class="fa fa-angle-double-left">&#160;</i>
        </div>
        <div class="rightarrow" >
          <i class="fa fa-angle-double-right">&#160;</i>
        </div>
        <div class="clipper">
          <ul>
            <xsl:for-each select="$Node/RelatedProducts_Expanded/Option">
              <li>
                <div class="productWrapper">
                  <xsl:if test="./ImageFile != ''">
                    <a href="{./@Value}" class="image">
                      <img>
                        <xsl:attribute name="src">
                          <xsl:value-of select="./ImageFile" disable-output-escaping="yes" />
                        </xsl:attribute>
                        <xsl:attribute name="alt">
                          <xsl:value-of select="./DisplayName"/>
                        </xsl:attribute>
                      </img>
                    </a>
                  </xsl:if>
                  <h4>
                    <a href="{./@Value}">
                      <xsl:value-of select="./DisplayName" disable-output-escaping="yes" />
                    </a>
                  </h4>
                  <p class="teaser">
                    <xsl:value-of select="./ShortDescription"/>
                  </p>
                  <p class="linkText">
                    <a href="{./@Value}">
                      Read more
                    </a>
                  </p>
                </div>
              </li>
            </xsl:for-each>
          </ul>
        </div>
      </div>
    </div>
  </div>

Here is my jQuery code:

function slider(wrapper){
$(wrapper + ' ul').each(function () {
    // this part unrelated to resize
    var numItems = $(wrapper + ' li').length; // number of items in slider
    var imgw = $(wrapper + ' li').width(); // width of image in li
    var ml = parseInt($(wrapper + ' li:first-child').css('marginLeft').replace('px','')); //left margin
    var mr = parseInt($(wrapper + ' li:first-child').css('marginRight').replace('px','')); //right margin
    var m = (ml+mr); //total margin
    var itemWidth = (imgw+m); // img width + margin
    var ulWidth = (itemWidth*numItems); // width for ul
    $(wrapper + ' ul').width(ulWidth); // apply ul width
    var $list = $(wrapper + ' .clipper ul');
    var $prev = $(wrapper + ' .leftarrow').css({ display:'block'}); // previous
        var $next = $(wrapper + ' .rightarrow').css({ display:'block'}); // next
        var $clip = $(wrapper + ' .clipper');
        $prev.addClass("disabled");

        if ($(this).width() < $clip.width()){
            $next.addClass("disabled");
            $prev.addClass("disabled");
        } else {
            $next.click(function () { 
                var pos = $list.position();
                var scroll = itemWidth * -1;
                var scrollStop = ((numItems * itemWidth) - $clip.width()) * -1;
                if ((pos.left > scrollStop) && (pos.left + scroll > scrollStop))
                    $list.animate({ left: "+=" + scroll + "px" }, "normal");
                else if (pos.left + scroll <= scrollStop) {
                    $list.animate({ left: scrollStop + "px" }, "normal");
                    $next.addClass("disabled");
                    $prev.removeClass("disabled");
                }
                $prev.removeClass("disabled");

            });

           $prev.click(function () {
                var pos = $list.position();
                var scroll = itemWidth;
                var scrollStop = 0;
                if ((pos.left < scrollStop) && (pos.left + scroll < scrollStop))
                    $list.animate({ left: "+=" + scroll + "px" }, "normal");
                else if (pos.left + scroll >= scrollStop) {
                    $list.animate({ left: scrollStop + "px" }, "normal");
                    $prev.addClass("disabled");
                    $next.removeClass("disabled");
                }
                $next.removeClass("disabled");
            });
        }

});

}

Answer 1

Does your XSLT execute on client or server side? If on server side, is it XSLT 1.0 or XSLT 2.0? A couple of issues with your XSLT:

• As presented now, it is not XSLT, did you forget the XSLT header and namespaces?
• The xsl:if is at the root, but it is not allowed there, is must be in a sequence constructor, for instance inside xsl:template.
• Solving XSLT issues is best done by taking the input node and store it locally and run the XSLT offline against an XSLT processor, for XSLT 1.0, you could use MSXML. You can use Visual Studio, or there are trial versions of oXygen or Stylus Studio that you can use.
• If the XSLT above is a snippet, the variable $Node is not bound to anything, as written it will raise a syntax error.
• If XSLT 1.0, you cannot use the variable bindings on node-sets, unless with vendor extension functions or the exslt:node-set function supported by most. But in your case you would not need that, simply do an xsl:apply-templates, if the node is not there, it won't be applied (generally, XSLT has very little branching and xsl:if statements)
• Your nested xsl:for-each is best replaced by a xsl:apply-templates and a corresponding matching template, this reduces nesting and makes it easier maintainable
• Where are your main xsl:template entry points? Can you update your question with the actual XSLT? What do you use for transforming the XML with jQuery? How did you bind the XSLT with the XML (processing instruction,server-side preprocessing, client-side pre-/post-procesing, other)?