Nivo 7 JQuery 画像スライダーで発生している問題について、助けていただければ幸いです。
-私のウェブサイトはレスポンシブで、電話用とデスクトップ用に別々のスタイルシートを持っています -電話バージョンではスライダーが美しく動作しますが、私のサイトのデスクトップ バージョンでは問題が発生します *問題: *最初の画像の後、スライダーが約 15% 圧縮され、最初の画像に再度ヒットした場合でも、他のすべての画像でこの方法が維持されます。画像はすべて同じ寸法です(何度も確認しました)。サイズの問題ではありません。スライダーは、最初に表示される画像の後の画像の下部 15% をカバーするだけです。nivo 7 サイトの指示に従って、すべてのコードをコピーし、関連するスタイルシートを添付しました。
私が理解していないのは、私のサイトの電話バージョンでは完全に機能しますが、デスクトップでは機能しないということです. 電話とデスクトップの唯一の違いはレイアウトです。デスクトップでは、スライダーの周りに div ラッパーを配置して、幅を 59% に、高さを自動に制限しました。#home1 セクションは、単に幅が 100% であることを示しています。以下はコードです:
<div id="homeWrapper">
<section id="home1">
<div class="slider-wrapper theme-light">
<div id="slider" class="nivoSlider">
<img src="pictures/home/MindBodySoulCafe.jpg" width="470" height="303" alt="Mind, Body, Soul project Cafe perspective">
<img src="pictures/home/MindBodySoulCAD.jpg" width="470" height="303" alt="floor plan of Mind, Body & Soul">
<img src="pictures/home/barkmaterials.jpg" width="470" height="303" alt="Materials used for Bark Media Project">
<img src="pictures/home/modelstairs.jpg" width="470" height="303" alt="Construction model for staircase">
</div>
</div>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'slideInLeft',
pauseTime: 4000,
pauseOnHover: true,
startSlide: 0,
});
});
</script>
</section>
</div>
残念ながら、現時点では css ファイルにアクセスできません。