将 Class 添加到当前滑块 div 元素

Question

我正在尝试将 Class 添加到当前幻灯片 div，我正在使用 Jssor Slider，我想知道是否可以添加自定义 class 到当前幻灯片。

示例 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 应用到这个新的 class。
添加Class当前滑块表示大幻灯片项目（中间幻灯片项目）不是小幻灯片（right/left侧） 。

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/

将 Class 添加到当前滑块 div 元素

Add Class to Current Slider div element

html

javascript

jquery

slider