Цикл JQuery — перед параметрами обратного вызова

Кажется, я не могу понять, как использовать параметры обратного вызова Before цикла 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, описанная выше?

РЕДАКТИРОВАТЬ: вот изображение nextSlideElement, помещенное в консоль через 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-->

Часть на французском, но код одинаков для языков.


javascript jquery jquery-cycle
person Fredy31    schedule 28.12.2011    source источник
comment
Можете ли вы показать пример данных в nextSlideElement?   -  person jergason    schedule 28.12.2011
comment
before: null, // обратный вызов перехода (область действия установлена ​​на отображаемый элемент): function(currSlideElement, nextSlideElement, options, forwardFlag)   -  person MahdeTo    schedule 28.12.2011
comment
@Jergason Я добавил скриншот в вопрос   -  person Fredy31    schedule 28.12.2011
comment
Можете ли вы опубликовать html следующего элемента слайда, который вы пытаетесь изменить? В этом примере я могу без проблем добавить класс/удалить класс с помощью nextSlideElement. jsfiddle.net/mt93D   -  person mrtsherman    schedule 28.12.2011
comment
Кусок кода был добавлен, так что вы можете видеть, куда я иду.   -  person Fredy31    schedule 28.12.2011
comment
Ответ ниже решил вопрос?   -  person lucuma    schedule 18.05.2012

Ответы (1)


arrow_upward
1
arrow_downward

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

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