向當前滑塊div元素添加類

Question

我正在嘗試將Class添加到Current Slide div ，我正在使用Jssor Slider ，我想知道是否有一種方法可以向當前幻燈片中添加自定義類。

小提琴示例>

的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/