Find current Slide div and add Class

Question

I'm trying to add Class to Current Slider div, I am using Jssor Slider, I've tried given JS below for add class to current slide, but it's not working. I have use this JS with 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 Call Below:

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

(Demo) Please see the Fiddle >>
Current slide should be red bored color when add class to current slide, but it's not working, it's unable to find current slide (some time Find for few moment), but where is the problem?
Trying to find current Slide div and add Class properly.

More Information:
This JS was good without random transition: demo http://jsfiddle.net/y7fap5dy/8/
But when I've added random transition code, it's unable to add class to current div.

Please compare:
Without random transition demo: http://jsfiddle.net/y7fap5dy/8/
Random transition demo: http://jsfiddle.net/y7fap5dy/7/ (unable to add class to current div)

Thanks in advance.

Answer 1

There are 2 issues:

first: You are applying the class current to the wrong div (to the inner most), that is why at random transition sometimes only a part (the innermost image) is affected.

the image structure at jssor has a lot of nested divs, you need to go up the dom to find the correct div.

so just change your variable currentDiv to:

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

this finds the first nested div in your jssor slider, there you want your class current added.

second: in order to find out once a slide is changing, you need to check with $EVT_STATE_CHANGE for idleBegin and idleEnd; don't use $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");  
    }
});

check the updated fiddle