jQuery serialScroll を使用して HTML スライドのスライドショーを作成しようとしています。ただし、スライドに、スクロールしようとしている要素と一致するネストされた要素が含まれている場合、少し奇妙な動作をします。
HTML要素の代わりにCSSクラスをセレクタ項目として使用する方法はありますか?
以下は、私が見た典型的な使用例です。
$('#screen').serialScroll({
target:'#sections',
items:'li',
prev:'img.prev',
next:'img.next',
navigation:'#navigation li a',
duration:700,
force:true,
step:1,
interval:1000
});
私は次のことをしたいと思います (注: アイテムの値として使用される CSS クラス):
$('#screen').serialScroll({
target:'#sections',
items:'.mycssclass',
prev:'img.prev',
next:'img.next',
navigation:'#navigation li a',
duration:700,
force:true,
step:1,
interval:1000
});
上記の例では、.mycssclass をリスト アイテム要素にアタッチし、さらにリスト アイテムがスライド HTML にネストされている場合、スライドは奇妙な方向に跳ね返ります。
私のマークアップは次のようになります。
<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>