How can I select the next slide container from anythingslider JQuery

Question

   <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

Answer 1

You can use

$('.activePage').next('.panel');

The .next() function gets you the next sibling, with optional selector.

Answer 2

If you are asking how to advance the slide, try this code (from the documentation):

$('#board_slider').data('AnythingSlider').goForward();