<ul id="board_slider">
<li>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
</li>
<li>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
<img src="images/temp/img1.gif"/>
</li>
</ul>
js:
$("#board_slider").anythingSlider(
{playRtl: true, enableKeyboard: false, buildNavigation: false, resizeContents: true, hashTags: false, buildStartStop: false, onSlideInit:drawRandom}
);
which will be rendered like this:
<li class="panel activePage" style="width: 656px; height: 188px;">
<img src="images/temp/img1.gif" class="notext brick">
<img src="images/temp/img1.gif" class="notext brick">
<img src="images/temp/img1.gif" class="notext brick">
<img src="images/temp/img1.gif" class="notext brick">
<img src="images/temp/img1.gif" class="notext brick">
<img src="images/temp/img1.gif" class="notext brick">
<img src="images/temp/img1.gif" class="notext brick">
</li>
<li class="panel" style="width: 656px; height: 188px; position: relative;" data-min-width="1440" data-total-col="12" data-total-row="5" data-wall-width="625" data-wall-height="158">
<img src="images/temp/img1.gif" width="655" height="125.33333333333333" class="notext brick" data-delay="1" data-height="61.777777671813965" data-width="436.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 411.67px; height: 54.2px; top: 0px; left: 0px;" id="1-3">
<img src="images/temp/img1.gif" width="436.6666666666667" height="125.33333333333333" class="notext brick" data-delay="2" data-height="187.77777767181396" data-width="217.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 198.33px; height: 88.8px; top: 69.2px; left: 0px;" id="2-3">
<img src="images/temp/img1.gif" width="218.33333333333334" height="62.666666666666664" class="notext brick" data-delay="3" data-height="124.77777767181396" data-width="654.777777671814" data-state="move" style="position: absolute; opacity: 1; width: 411.67px; height: 88.8px; top: 69.2px; left: 213.33px;" id="3-3">
<img src="images/temp/img1.gif" width="655" height="62.666666666666664" class="notext brick" data-delay="4" data-height="124.77777767181396" data-width="436.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 426.67px;" id="4-3">
<img src="images/temp/img1.gif" width="218.33333333333334" height="188" class="notext brick" data-delay="5" data-height="187.77777767181396" data-width="436.77777767181396" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 480px;" id="5-3">
<img src="images/temp/img1.gif" width="218.33333333333334" height="188" class="notext brick" data-delay="6" data-height="124.77777767181396" data-width="654.777777671814" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 533.33px;" id="6-3">
<img src="images/temp/img1.gif" width="436.6666666666667" height="188" class="notext brick" data-delay="7" data-height="61.777777671813965" data-width="654.777777671814" data-state="move" style="position: absolute; opacity: 1; width: 38.33px; height: 54.2px; top: 0px; left: 586.67px;" id="7-3">
</li>
How can I select the next slider when I'm on the active one right now
You can use
$('.activePage').next('.panel');
The .next() function gets you the next sibling, with optional selector.