当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Custom Slider Not Sliding involves XSL

问题描述:

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");

});

}

});

}

网友答案:

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)?
分享给朋友:
您可能感兴趣的文章:
随机阅读: