自定义 Slider Not Sliding 涉及 XSL

Question

我正在制作一个 jQuery 滑块，但我似乎无法让滑块真正滑动。箭头正在工作，因为正在添加我添加的类，但它不会导致图像滑过。图像被绘制到滑块并正确显示，图像从右侧的滑块上脱落。我的代码没有滑动有什么问题？非常感谢任何帮助 这是我的 XSL（出于某种原因，必须去掉前两个 xsl 标签才能显示。如果需要，请告诉我）：

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

这是我的 jQuery 代码：

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

您的 XSLT 是在客户端还是服务器端执行？如果在服务器端，是 XSLT 1.0 还是 XSLT 2.0？ XSLT 的几个问题：

• 正如现在所说，它不是 XSLT，您是否忘记了 XSLT 标头和命名空间？
• xsl:if 位于根部，但不允许存在，必须在序列构造函数中，例如在 xsl:template 中。
• 解决 XSLT 问题的最佳方法是获取输入节点并将其存储在本地，然后针对 XSLT 处理器脱机运行 XSLT，对于 XSLT 1.0，您可以使用 MSXML。您可以使用 Visual Studio，也可以使用 oXygen 或 Stylus Studio 的试用版。
• 如果上面的 XSLT 是一个 sn-p，则变量 $Node 不会绑定到任何东西，因为它会引发语法错误。
• 如果 XSLT 1.0，您不能在节点集上使用变量绑定，除非使用供应商扩展函数或大多数支持的 exslt:node-set 函数。但是在您的情况下，您不需要这样做，只需执行xsl:apply-templates，如果节点不存在，则不会应用它（通常，XSLT 的分支很少，xsl:if 语句）
• 嵌套的xsl:for-each 最好替换为xsl:apply-templates 和相应的匹配模板，这样可以减少嵌套并使其更易于维护
• 您的主要xsl:template 入口点在哪里？你能用实际的 XSLT 更新你的问题吗？你用什么transforming the XML with jQuery？您是如何将 XSLT 与 XML 绑定的（处理指令、服务器端预处理、客户端预处理/后处理、其他）？