Найти текущий слайд div и добавить класс

Question

Я пытаюсь добавить класс в текущий слайдер div, я использую Jssor Slider, я пробовал данный JS ниже для добавления класса в текущий слайд, но он не работает. Я использую этот JS с Jssor Call.

// event fired when slider is "parked" 
jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex){ 

    var allImages = $(jssor_slider1.$Elmt).find("img[u=image]"); 
    var currentImage = allImages.eq(slideIndex); 
    var currentDiv = currentImage.parent("div"); 

    currentDiv.addClass("current"); 

}); 

// event fired when slider starts moving 
jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, function(position){ 

    // remove 'current' class from all slides 
    $(jssor_slider1.$Elmt).find(".current").removeClass("current");  
}); 

Jssor вызовов Ниже:

jQuery(document).ready(function($) { 

//Define an array of slideshow transition code 
var _SlideshowTransitions = [ 
{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Left:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Brother:{$Duration:1200,x:1,$Delay:40,$Cols:6,$Formation:$JssorSlideshowFormations$.$FormationStraight,$Easing:{$Top:$Jease$.$InOutQuart,$Opacity:$Jease$.$Linear},$Opacity:2,$ZIndex:-10,$Shift:-100}}, 
{$Duration:1200,y:0.3,$Cols:2,$During:{$Top:[0.3,0.7]},$ChessMode:{$Column:12},$Easing:{$Top:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2}, 
{$Duration:1200,x:0.3,$Rows:2,$During:{$Left:[0.3,0.7]},$ChessMode:{$Row:3},$Easing:{$Left:$Jease$.$InCubic,$Opacity:$Jease$.$Linear},$Opacity:2} 
    ]; 

    var options = { 
    $AutoPlay: true, 

    $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false 

    $ArrowKeyNavigation: true, //Allows arrow key to navigate or not 
    $SlideWidth: 800, //[Optional] Width of every slide in pixels, the default is width of 'slides' container 
    //$SlideHeight: 300,         //[Optional] Height of every slide in pixels, the default is width of 'slides' container 
    $SlideSpacing: 0, //Space between each slide in pixels 
    $Cols: 1, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 

    //New add for random transition 
    $SlideshowOptions: { 
     $Class: $JssorSlideshowRunner$, 
     $Transitions: _SlideshowTransitions, 
     $TransitionsOrder: 0, //The way to choose transition to play slideshow, 1: Sequence, 0: Random 
     $ShowLink: true 
    }, 

    $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not 
     $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance 
     $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always 
     $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1 
    } 
    }; 

    var jssor_slider1 = new $JssorSlider$("slider1_container", options); 

    //responsive code begin 
    //you can remove responsive code if you don't want the slider scales while window resizes 
    function ScaleSlider() { 
    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
    if (parentWidth) 
     jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800)); 
    else 
     window.setTimeout(ScaleSlider, 30); 
    } 
    ScaleSlider(); 

    $(window).bind("load", ScaleSlider); 
    $(window).bind("resize", ScaleSlider); 
    $(window).bind("orientationchange", ScaleSlider); 


    //============== Find Current slide Code =====================// 

    // event fired when slider is "parked" 
    jssor_slider1.$On($JssorSlider$.$EVT_PARK, function(slideIndex) { 

    var allImages = $(jssor_slider1.$Elmt).find("img[u=image]"); 
    var currentImage = allImages.eq(slideIndex); 
    var currentDiv = currentImage.parent("div"); 

    currentDiv.addClass("current"); 

    }); 

    // event fired when slider starts moving 
    jssor_slider1.$On($JssorSlider$.$EVT_POSITION_CHANGE, function(position) { 

    // remove 'current' class from all slides 
    $(jssor_slider1.$Elmt).find(".current").removeClass("current"); 

    }); 

    //============================================================// 

}); // Call end 

(демонстрационном)Пожалуйста see the Fiddle >>
Текущий слайд должен быть красным маль красный цвет при добавлении класса к текущему слайду, но он не работает, он не может найти текущий слайд (какое-то время найдётся на несколько мгновений), но где проблема?
Пытается найти текущий Слайд div и добавьте класс правильно.

Дополнительная информация:
Этого JS был хорош без случайного перехода: дем http://jsfiddle.net/y7fap5dy/8/
Но когда я добавил случайные переходный код, он не в состоянии добавить класс к текущим делам.

Пожалуйста, сравните:
без случайного перехода демо: http://jsfiddle.net/y7fap5dy/8/
Случайного перехода демо: http://jsfiddle.net/y7fap5dy/7/ (не удался добавить класса к текущим делам)

Спасибо заранее.

Answer 1

Есть 2 вопроса:

первый: Вы подаете класс current к неправильному div (к внутреннему большинство), поэтому при случайном переходе иногда только часть (внутренний образ) подвергается воздействию.

Структура изображения в jssor имеет много вложенных div, вам нужно подняться до дома, чтобы найти правильный div.

так просто изменить переменную currentDiv на:

var currentDiv = currentImage.closest('#slider1_container').children("div"); 

это находит первый вложенный div в вашем слайдере jssor, там вы хотите, чтобы ваш класс current добавил.

второй: для того, чтобы выяснить, когда слайд меняется, вы должны проверить с $EVT_STATE_CHANGE для idleBegin и idleEnd; не использовать $EVT_PARK:

jssor_slider1.$On($JssorSlider$.$EVT_STATE_CHANGE , function(slideIndex, progress, progressBegin, idleBegin, idleEnd, progressEnd){ 

    // add 'current' class to slide 
    if(progress==idleBegin){ 
     var allImages = $(jssor_slider1.$Elmt).find("img[u=image]"); 
     var currentImage = allImages.eq(slideIndex); 
     var currentDiv = currentImage.closest('#slider1_container').children("div"); 
     currentDiv.addClass("current");   
    } 
    // remove 'current' class from slide 
    else if(progress==idleEnd){ 
     $(jssor_slider1.$Elmt).find(".current").removeClass("current"); 
    } 
}); 

проверить обновленный fiddle