1

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 &amp; 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 ファイルにアクセスできません。

4

0 に答える 0