私はいくつかの解決策を検索して試しましたが、役に立ちませんでした。現在、jQuery 1.7.1 と Nivo Slider 3.0.1 を使用しています。
ウェブサイトはhttp://www.wheelerbikeclub.netで見ることができます (これは私が昨年作成したウェブサイトで、今戻ってきたところです)。
ホームページの nivo スライダーの効果がまったく機能しません。昨年、彼らがいたポイントがあったことは知っていますが、その後何かを変更しましたが、今は変更されておらず、何が起こったのか思い出せません。
列/ボックス/スライスの数が画像を均等に分割するようにしました。誰が問題が何であるか知っていますか? スライダーが画面全体を覆うように強制しているという事実に何らかの関係がありますか?
フィードバックをお寄せいただきありがとうございます。
head セクションで jQuery を呼び出し、続いて NivoSlider スクリプトを呼び出します。
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
それから私が入れたラッパーの私の体に
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
<img src="img/new_slides/slide_2-4.png" alt="" />
<img src="img/new_slides/slide_4.png" alt="" />
<img src="img/new_slides/slide_3-1.png" alt="" />
</div>
<div id="slide_1-caption" class="nivo-html-caption">
<a href="legacy"><strong>Find Out More</strong></a>.
</div>
</div>
4 つの画像があり、画像 1 でキャプションをテストしているところです。
私のnivo-slider cssには(全体ではなく、問題があると思われる場所だけです)
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.nivo-slice {
display:block;
position:absolute;
z-index:100;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
そして、私のメインのstyles.cssには
.slider-wrapper { position:relative;
top: 0px;
left: 0px;
width: 100%;
position:fixed;
z-index:0; }
#slider-div { min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
それが理にかなっていることを願っています。