Question

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

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>

Answer 1

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