JQuery Cycle - Перед параметрами обратного вызова

Question

Не могу понять, как использовать параметры обратного вызова до цикла Jquery.

jQuery('#slider_accueil').cycle({ 
    fx:     'fade',
    timeout: 5000,
    after: onAfter,
    before: onBefore,
    startingSlide: 0,
    next: '.next_btn_slider',
    prev: '.prev_btn_slider'
});

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag){
    jQuery('.indicator').removeClass('current')
}

Я хочу сделать что-то в контейнере следующего элемента, но nextSlideElement отправляет обратно множество данных, и ничего из этого, что я могу связать со следующим элементом в строке (искал какой-то идентификатор или класс, Не смог найти)

Так вот в чем суть вопроса: как настроить таргетинг на следующий элемент с помощью функции onBefore, указанной выше?

РЕДАКТИРОВАТЬ: Вот изображение следующего элемента SlideElement, вставленного в консоль через console.dir(nextSlideElement)

РЕДАКТИРОВАТЬ 2: Вот код, я пытаюсь добавить класс к миниатюре, связанной с каждым слайдом (1 с 1, 2 с 2 и т. Д.)

<!--Slider sur l'accueil-->
<div id="sliderAccueil">

    <!--Contrôles du slider (next/previous)-->
    <div style="display:none;"></div>
    <img class="prev_btn_slider" src="http://www.x.com/wp-content/themes/Sandbox/images/slider_previous.png" alt="Image Précédente" />
    <img class="next_btn_slider" src="http://www.x.com/wp-content/themes/Sandbox/images/slider_next.png" alt="Image Suivante" />
    <div id="nav"></div>

    <!--Images du slider-->                
    <div id="slider_accueil">


        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slider1.jpg" alt="Assurer la Sécurité" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Assurer la Sécurité</h2>
                                                                                                    <p>Assurer la Sécurité</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slider_item_bilan_travaux.jpg" alt="Bilan des travaux" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Special stuff</h2>
                                                                                                    <p>Bilan des travaux</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slider_item_poutrelles.jpg" alt="Des travaux inusités à 300 pieds au-dessus de l’eau" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Travaux</h2>
                                                                                                    <p>Des travaux inusités à 300 pieds au-dessus de l’eau</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/10/slider-1961-05-05.jpg" alt="Photos d’archive" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2 style="margin-bottom:0;">Photos d’archive</h2>
                                                                                                </div>
                    <div class="link">
                        <a href="">En savoir plus</a>
                        <a href="" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>



        <div style="width:778px; height:384px; overflow:hidden;">
            <a href="http://www.x.com/">

                <!--Image-->
                                            <img src="http://www.x.com/wp-content/uploads/2011/09/slide_reseau_sociaux.jpg" alt="Branché sur les réseaux sociaux" />

                <!--Contenu rajouté-->
                <div>
                                                    <div class="maintext">
                                                                                                            <h2>Réseaux Sociaux</h2>
                                                                                                    <p>Branché sur les réseaux sociaux</p>
                                                        </div>
                    <div class="link">
                        <a href="http://www.x.com/">En savoir plus</a>
                        <a href="http://www.x.com/" class="call_slide"><img src="http://www.x.com/wp-content/themes/Sandbox/images/call_slider.png" alt="En savoir plus" /></a>
                    </div>
                                                </div>

            </a>
        </div>


    </div><!--#slider_accueil-->

    <!--Thumbnails contrôlant le slider-->
    <div id="thumbnails_slider_accueil">

        <ul>


            <li id="li_thumb1">
                <a id="thumb1" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider1-150x150.jpg) center center">
                        <p>Assurer la Sécurité</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb2">
                <a id="thumb2" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider_item_bilan_travaux-150x150.jpg) center center">
                        <p>Bilan des travaux</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb3">
                <a id="thumb3" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slider_item_poutrelles-150x150.jpg) center center">
                        <p>Des travaux inusités à 300 pieds au-dessus de l’eau</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb4">
                <a id="thumb4" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/10/slider-1961-05-05-150x150.jpg) center center">
                        <p>Photos d’archive</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>


            <li id="li_thumb5">
                <a id="thumb5" class="thumb_slider_accueil">
                                                    <div class="indicator"></div>
                    <div class="thumbnail" style="background:url(http://www.x.com/wp-content/uploads/2011/09/slide_reseau_sociaux-150x150.jpg) center center">
                        <p>Branché sur les réseaux sociaux</p>
                    </div>
                    <div class="clear"></div>
                                                </a>
            </li>
                                </ul>

    </div><!--#thumbnails_slider_accueil-->
    <div class="clear"></div>
</div><!--#sliderAccueil-->

Часть написана на французском языке, но код - то же самое, что и на языках

Answer 1

Вы должны иметь возможность использовать эту форму, чтобы получить элемент индикатора для следующего слайда.Селектор jquery позволяет определить его по $(selector,[scope])

function onBefore(currSlideElement, nextSlideElement, options, forwardFlag){
    $('.indicator', nextSlideElement).removeClass('current');
}