jssor滑塊不響應導航箭頭

Question

我正在使用javascript動態構建jssor滑塊。 滑塊基於jssor“輪播”演示。 顯示時一切看起來正確，包括滑塊任一端的導航箭頭。 當我用鼠標向左或向右滑動時，它也會正確響應。 但是，滑塊不響應導航箭頭上的任何單擊。

我在其他帖子中提到的一個問題是導航箭頭的嵌套不正確。 我認為這不是問題所在。 非常感激任何的幫助。

這是構建滑塊的javascript：

var CpxRowSlider = function(callback) {
var callback;
var indexedImgEl = new Array();
var DEFAULT_H = 110;
var DEFAULT_W = 260;
var outerDivEl = document.createElement('div');
var title = true;
var addNavArrows = true;

var sliderDivEl = null;
var sliderId = "slider_SOLO";

/*
 * image set should be an array of key-value pairs where the value is the
 * URL of an image and the key will be used as a tag that identifies the
 * image in any callback functions.
 */
function create(imageSet) {
    /* Slides Container -- */
    var rowDivEl = document.createElement('div');
    $(rowDivEl).attr("u", "slides");
    $(rowDivEl).css({
        "cursor" : "move",
        "position" : "absolute",
        "left" : "0px",
        "top" : "0px",
        "width" : "780px",
        "height" : "110px",
        "overflow" : "hidden"
    });
    for ( var key in imageSet) {
        var imgUrl = imageSet[key];
        var imgDivEl = document.createElement('div');
        var imgEl = document.createElement('img');
        imgEl.src = imgUrl;
        $(imgEl).attr("u", "image");
        imgDivEl.appendChild(imgEl);
        // add to row
        rowDivEl.appendChild(imgDivEl);
        $(imgEl).data("cpxKey", key);
        /*
         * actions associated with the img....
         */
        /*
         * click event gets handed off via callback
         */
        if ((callback != undefined) && (callback != null)) {
            imgEl.onclick = function(evt) {
                var targetImg = evt.target;
                trace("Click on " + $(targetImg).data("cpxKey"));
                callback($(targetImg).data("cpxKey"));
            };
        }
    }
    // add slides to a slider...
    sliderDivEl = document.createElement('div');
    sliderDivEl.id = sliderId

    $(sliderDivEl).css({
        "position" : "relative",
        "left" : "0px",
        "top" : "0px",
        "width" : "780px",
        "height" : "110px"
    });
    // add to DOM
    sliderDivEl.appendChild(rowDivEl);
    if (addNavArrows) {
        sliderDivEl.appendChild(createNavArrow(true));
        sliderDivEl.appendChild(createNavArrow(false));
    }
    outerDivEl.appendChild(sliderDivEl);
}

function createNavArrow(toLeft) {
    var arrowSpan = document.createElement('span');
    $(arrowSpan).attr("u", "image");
    $(arrowSpan).css({
        "top" : "30px",
        "width" : "55px",
        "height" : "55px"
    });
    if (toLeft) {
        $(arrowSpan).css({
            "left" : "5px"
        });

        $(arrowSpan).addClass("jssora03l");
    } else {
        $(arrowSpan).css({
            "right" : "5px"
        });
        $(arrowSpan).addClass("jssora03r");
    }
    return arrowSpan;
}

/*
 * Invoked only AFTER the slider has been added to the DOM
 */
function finalize() {
    // add to sliders being controlled by jssor
    var sliderOptions = getSliderOptions();
    var jssor_sliderh = new $JssorSlider$(sliderId, sliderOptions);
}

function getSliderOptions() {
    var sliderhOptions = {
        /*
         * $AutoPlay [Optional] Whether to auto play, to enable slideshow,
         * this option must be set to true, default value is false
         */
        $AutoPlay : false,
        /*
         * $PauseOnHover [Optional] Whether to pause when mouse over if a
         * slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause
         * for touch device, 3 pause for desktop and touch device, default
         * value is 1
         */
        $PauseOnHover : 1,
        /*
         * $AutoPlaySteps [Optional] Steps to go for each navigation request
         * (this options applys only when slideshow disabled), the default
         * value is 1
         */
        $AutoPlaySteps : 2,
        /*
         * $ArrowKeyNavigation [Optional] Allows keyboard (arrow key)
         * navigation or not, default value is false
         */
        // $ArrowKeyNavigation : true,
        /*
         * [Optional] Specifies default duration (swipe) for slide in
         * milliseconds, default value is 500
         */
        $SlideDuration : 300,
        /*
         * [Optional] Minimum drag offset to trigger slide , default value
         * is 20
         */
        $MinDragOffsetToSlide : 20,
        /*
         * [Optional] Width of every slide in pixels, default value is width
         * of 'slides' container
         */
        $SlideWidth : DEFAULT_W,
        /*
         * [Optional] Height of every slide in pixels, default value is
         * height of 'slides' container
         */
        // $SlideHeight: 150,
        /*
         * [Optional] Space between each slide in pixels, default value is 0
         */
        $SlideSpacing : 3,
        /*
         * [Optional] Number of pieces to display (the slideshow would be
         * disabled if the value is set to greater than 1), the default
         * value is 1
         */
        $DisplayPieces : 3,
        /*
         * [Optional] The offset position to park slide (this options applys
         * only when slideshow disabled), default value is 0.
         */
        $ParkingPosition : 0,
        /*
         * [Optional] The way (0 parellel, 1 recursive, default value is 1)
         * to search UI components (slides container, loading screen,
         * navigator container, arrow navigator container, thumbnail
         * navigator container etc).
         */
        $UISearchMode : 0,
        // ...................................
        // [Optional] Options to specify and enable navigator or not
        $BulletNavigatorOptions : {
            $Class : $JssorBulletNavigator$, // [Required] Class to
            // create navigator instance
            $ChanceToShow : 1, // [Required] 0 Never, 1 Mouse Over, 2
            // Always
            $AutoCenter : 0, // [Optional] Auto center navigator in
            // parent container, 0 None, 1 Horizontal, 2
            // Vertical, 3 Both, default value is 0
            $Steps : 1, // [Optional] Steps to go for each navigation
            // request, default value is 1
            $Lanes : 1, // [Optional] Specify lanes to arrange items,
            // default value is 1
            $SpacingX : 0, // [Optional] Horizontal space between each item
            // in pixel, default value is 0
            $SpacingY : 0, // [Optional] Vertical space between each item
            // in pixel, default value is 0
            $Orientation : 1
        // [Optional] The orientation of the navigator, 1 horizontal, 2
        // vertical, default value is 1
        }
    }
    return sliderhOptions;
}

function trace(msg) {
    console.log("CpxRowSlider: " + msg);
}

return {
    create : create,
    finalize : finalize,
    getContainer : function() {
        return outerDivEl;
    }
};
};

更新：好吧，有些挖掘發現了“哪里”，但是“為什么”仍然是個謎。 生成的HTML應該看起來像這樣（為清楚起見，減去“樣式”）：

<div id="slider_SOLO" >      
        <div u="slides">
            <div>
                <img u="image" src="../foo1.jpg" />
            </div>
            <div>
                <img u="image" src="../foo2.jpg" />
            </div>
        <div>
        <span u="arrowleft" class="jssora03l" ></span>
        <span u="arrowright" class="jssora03r"></span>
</div>

問題在於，在實際的HTML頁面中，有兩個元素的屬性為u =“ slides”。 第二個是正確的，但在它之前是另一個空div。 換句話說，當我檢查顯示的HTML時看到的DOM更像是：

<div id="slider_SOLO" >     
        <div u="slides"></div>   
        <div u="slides">
            <div>
                <img u="image" src="../foo1.jpg" />
            </div>
            <div>
                <img u="image" src="../foo2.jpg" />
            </div>
        <div>
        <span u="arrowleft" class="jssora03l" ></span>
        <span u="arrowright" class="jssora03r"></span>
</div>

如果將類似的div添加到jssor輪播演示HTML中，則會得到相同的行為（即，導航箭頭不再起作用）。

問題是我的JavaScript沒有插入錯誤（即額外的DIV）。 相反，它似乎與調用var jssor_sliderh = new $JssorSlider$(sliderId, sliderOptions);

我想知道原因是否在我傳遞的選項中。

Answer 1

找到了！ 根本原因確實是我的選擇，而不是我的想法。 我錯過了$ ArrowNavigatorOptions。 神秘的DIV仍在插入，但現在一切正常。

對我來說，重要的一點是，jssor似乎悄無聲息地失敗了，因為它沒有生成有關缺少選項的控制台消息，而是什么也沒做。