自定义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头和namespaces?

• The xsl:if在根目录，但它不允许在那里，它必须在序列构造函数中，例如，在XSLT问题中，最好的方法是获取输入节点并将其存储在本地，然后在XSLT处理器上脱机运行xsl:if，对于xslt1.0，您可以使用MSXML。您可以使用Visual Studio，也可以使用oXygen或Stylus Studio的试用版本。

• 如果上面的XSLT是一个代码片段，变量$Node没有绑定到任何东西，因为它会在编写时引发语法错误。

• 如果是xslt1.0，则不能在节点集上使用变量绑定，除非使用供应商扩展函数或most支持的exslt:node-set函数。但在你的例子中，你不需要这样做，简单地做一个xsl:apply-templates，如果节点不在那里，它就不会被应用(通常，XSLT只有很少的分支，xsl:if XSLT嵌套的xsl:for-each最好用一个xsl:apply-templates和相应的匹配模板来替换，这减少了嵌套并使其更容易)，你的主要xsl:template入口点是maintainable

• Where吗？您能用实际的XSLT更新您的问题吗？你对transforming the XML with jQuery使用什么？如何将XSLT与XML绑定(处理指令、服务器端预处理、客户端前/后处理等)？