Question

我正在尝试将类添加到当前幻灯片div，我正在使用Jssor Slider，我想知道是否有办法将自定义类添加到当前幻灯片中。

示例Fiddle＆gt;

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定义了一些可用于此的事件，特别是我们可以使用NSLayoutContraint和$EVT_PARK，如下所示：

$EVT_POSITION_CHANGE

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

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

1 个答案: