0

コンテンツの背面に nivo スライダーがあり、水平方向に広いサイトがあります。すべて正常に動作しますが、コントロールの「矢印」と「箇条書き」は正常に動作しません。

例: http://www.aiguapool.mx/test/

IE 8 と IE9 ではクリックして動作しますが、firefox と chrome では何もしません。これは、一部の div がカバーしていて、ユーザーがボタンをクリックできないようにするようなものです。Nivo Slider はほとんど変更されていません。この CCS コードを含む nivo Slider のラッパーを作成しました。

.slider-wrap {<br>
    overflow: hidden;<br>
    position: absolute;<br>
    width: 1490px;<br>
    height: 535px;<br>
    top: 80px;<br>
    left: 50%;<br>
    margin-left: -745px;<br>
    z-index: -1;<br>
}

だから私の質問は、なぜ IE で動作し、Firefox や Chrome では動作せず、Safari でさえ機能しないのかということです。何か不足している場合は、外部コントロールを生成することを試みましたが、動作しませんでした (コントロールが応答しません)。

$("#previousButton, #nextButton").click(function (e) {

         // Prevent the link from being followed
         e.preventDefault();

         // Initialize variables 
         var buttonId = this.id,
          buttonClass = ("previousButton" == buttonId) ? ".nivo-prevNav" : ".nivo-nextNav";

         // Trigger the slider button
         $(".nivo-directionNav").find(buttonClass).click();
    });

$("#triangleNodePrev").click(function(){$(".nivo-directionNav .nivo-prevNav").click()})
$("#triangleNodeNext").click(function(){$(".nivo-directionNav .nivo-nextNav").click()})

$(".nivo-directionNav .nivo-prevNav").click()

$(".nivo-directionNav .nivo-nextNav").click()

リンクを作成します<a href="#" id="previousButton">Back</a>

4

1 に答える 1

0

最後に、何度も試して解決しました。私はグリッド システムを使用していることに言及する必要があるため、上部にヘッダー用のコンテナーが 1 つ、下部にコンテンツ用のコンテナーが 1 つあります。

そこで、コンテンツのコンテナーの CSS を微調整しました。

.container_content {
    position: absolute;
    margin-left: -540px;
    width: 1050px;
    padding: 0 15px;
    background: url(../images/estructura/bg-content-albercas.png) no-repeat;
    min-height: 200px;
    top: 560px;
    left: 50%;
    padding-top: 40px;
    z-index:99;
}

そしてすべてがうまくいきました。

于 2012-05-10T17:37:18.480 に答える