Question

我在这里有一个演示 - 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

Answer 1

我今天遇到了类似的问题，发现你可以通过向图像的父类添加高度并设置它来快速修复！重要。在查看检查员之后，我发现其中一个父类在加载时默认为0px高度 - 不是最佳做法，不过是合适的绑带。

.carousel {
      max-width:900px;
      height:400px !important;
    }

如果没有窗口调整大小，Carousel就不会加载

1 个答案: