添加类到当前的滑块div元素

Question

我想添加类到当前的幻灯片div，我使用Jssor Slider，我想知道是否有一种方法来添加自定义类到当前幻灯片。

例Fiddle>

HTML

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;"> 
    <!-- Slides Container --> 
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;"> 
     <div><img u="image" src="image1.jpg" /></div> <!-- slide item --> 
     <div><img u="image" src="image2.jpg" /></div> 
    </div> 
</div> 

JS

jQuery(document).ready(function ($) { 
    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: 600,      //[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: 2,     //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1 
     $Align: 100,    //The offset position to park slide (this options applys only when slideshow disabled). 

     $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); 
      //Call end 
     }); 

我已经试过这一点，但不工作：

$('#slider1_container' + ' ' + theClass) 
       .animate({ 
        left: animateLeft 
       }, function(){ 
        $element 
         .children(options.div).removeClass('current') 
         .filter(':eq('+(theSlide-1)+')') 
         .addClass('current'); 

     }); 

我的目标是将自定义样式的CSS应用到这个新类中。
添加班级当前滑块意味着大滑动项目（中间滑动项目）不是为了小滑块（右/左侧）。

Answer 1

JssorSlider定义，你可以使用这几个事件，特别是我们可以使用$EVT_PARK和$EVT_POSITION_CHANGE，像这样：

// 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");  

}); 

演示：http://jsfiddle.net/alan0xd7/y7fap5dy/4/