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 来快速修复。在查看检查器后，我发现其中一个父类在加载时默认为 0px 高度 - 无论如何都不是最佳实践，而是合适的创可贴。

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