0

ここにデモがあります - http://www.ttmt.org.uk/carousel/index.html

ここにjsfiddle - http://jsfiddle.net/Lsug7/

私は caroufredsel カルーセルを使用しています - http://caroufredsel.dev7studios.com

私の問題は、ウィンドウのサイズが変更されるまで、カルーセルが正しく読み込まれないことです

これがなぜなのか、誰もが知っていますか。

    <!DOCTYPE html>
    <html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

      <!--jQuery-->
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
      <script type="text/javascript" language="javascript" src="js/jquery.carouFredSel.js"></script>

      <!--css-->

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }
        .carousel img{
          max-width:900px;
          height:auto;
        }

        @media only screen and (max-width:800px){
          .carousel img{
            max-width:700px;
            height:auto;
          }
        }
        @media only screen and (max-width:500px){
          .carousel img{
            max-width:400px;
            height:auto;
          }
        }
        @media only screen and (max-width:400px){
          .carousel img{
            max-width:300px;
            height:auto;
          }
        }

      </style>


      <!--[if lt IE 9]>
             <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

      <title>Title of the document</title>
      </head>

    <body>

      <section >
            <div class="carousel">
          <img src="images/slide-show-1.jpg" />
          <img src="images/slide-show-2.jpg" />
          <img src="images/slide-show-3.jpg" />
          <img src="images/slide-show-4.jpg" />
        </div>

        </section>


        <script type="text/javascript" language="javascript">
        $(document).ready(function(){
            $('.carousel').carouFredSel({
                width: '100%',
                items: {
                    visible: 3,
                    start: -1
                },
                scroll: {
                    items: 1,
                    duration: 1000,
                    timeoutDuration: 3000
                },

            });
        });
      </script>     

    </body>

    </html
4

1 に答える 1

0

今日も同様の問題に遭遇しましたが、画像の親クラスに高さを追加して !important に設定することで簡単に修正できることがわかりました。インスペクタを調べたところ、ロード時に親クラスの 1 つがデフォルトで 0px の高さになっていることがわかりました。ベスト プラクティスではありませんが、適切な絆創膏です。

.carousel {
      max-width:900px;
      height:400px !important;
    }
于 2013-12-12T04:33:02.683 に答える