How can I use CSS classes as selector items with nested HTML elements in serialScroll?
Trying to build a slideshow of HTML slides with jQuery serialScroll. However, if my slides contain nested elements that match the element I'm trying to scroll, then it acts a little weird.
Is there a way to use CSS classes as selector items instead of HTML elemen开发者_如何学Gots?
Here is an example of the typical usages I've seen:
$('#screen').serialScroll({
target:'#sections',
items:'li',
prev:'img.prev',
next:'img.next',
navigation:'#navigation li a',
duration:700,
force:true,
step:1,
interval:1000
});
I would like to do the following (note: CSS class used as items value):
$('#screen').serialScroll({
target:'#sections',
items:'.mycssclass',
prev:'img.prev',
next:'img.next',
navigation:'#navigation li a',
duration:700,
force:true,
step:1,
interval:1000
});
In the above example, if you attached the .mycssclass to a list item elements and the have further list items nested in the slide HTML, your slides will bounce around in odd directions.
My markup looks like this:
<div id="screen">
<div id="sections">
<ul>
<li class="mycssclass">
<h2>Section 1</h2>
<ul>
<li>Nest li</li>
</ul>
<p>Lorem ipsum dolor sit amet...</p>
</li>
<li class="mycssclass">
<h2>Section 2</h2>
<ul>
<li>Nest li</li>
</ul>
<p>Lorem ipsum dolor sit amet...</p>
</li>
</ul>
</div>
</div>
items
already takes a selector, it's used here:
function getItems(){
return $( items, pane );
};
So...just use exactly what you want in the question, it'll find any .mycssclass
elements inside #screen
, equivalent to:
$(".mycssclass", "#screen")
//or..
$("#screen").find(".mycssclass")
精彩评论