Question

我正在使用Slick carousel http://kenwheeler.github.io/slick/来展示一些视频。当我单击按钮以显示包含旋转木马的隐藏div时视频重叠，我认为存在渲染问题。我究竟做错了什么？感谢

这是我的代码

<script src="js/modernizr-1.7.min.js" type="text/javascript" ></script>
    <script src="js/jquery-2.1.0.min.js" type="text/javascript" ></script>
    <script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
    <script src="slick/slick.js" type="text/javascript"></script>

    <script>
        $(document).ready(function (e) {
            $("#slider").hide();
            $("#btn").on('click',function(){
                $("#slider").show();

            });

          $('.responsive').slick({
                dots: true,
                infinite: false,
                speed: 300,
                slidesToShow: 4,
                slidesToScroll: 4,
                responsive: [
                {
                    breakpoint: 1024,
                    settings: {
                        slidesToShow:3,
                        slidesToScroll: 3,
                        infinite: true,
                        dots: true
                    }
                },
                {
                    breakpoint: 600,
                    settings: {
                        slidesToShow: 2,
                        slidesToScroll: 2
                    }
                },
                {
                    breakpoint: 480,
                    settings: {
                        slidesToShow: 1,
                        slidesToScroll: 1
                    }
                }
          ]
   });


        });
    </script>

    <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
    <style>
        body{
        background-color: grey;
    }

    iframe {
      width:211px;
      }
    .responsive {
        margin-left: 20%;
        margin-right: 20%;

    }
    </style>
</head>
<body>
    <button id="btn">show</button>
     <div id="slider" class="slider responsive">
    <div><iframe src="http://player.vimeo.com/video/93351994"></iframe>
        <div><a href="presentazione.html"><span style="color:black"><strong> » Presentazione</strong></span></a></div> 
    </div> 
    <div><iframe src="http://player.vimeo.com/video/93349624"></iframe>
        <div><a href="os.html"><span style="color:black"> <strong>» OS</strong> </span></a></div>
    </div> 
    <div><iframe src="http://player.vimeo.com/video/93349620"></iframe>
        <div><a href="sistemi.html"><span style="color:black"> <strong>» Sistemi interattivi</strong> </span></a></div>
    </div> 
    <div><iframe src="http://player.vimeo.com/video/93349621"></iframe>
        <div><a href="ali.html"><span style="color:black"> <strong>» Ali</strong></span></a></div>
    </div>

»歌剧

    <div><iframe src="http://player.vimeo.com/video/93349622"></iframe>
        <div><a href="apertura.html"><span style="color:black"> <strong>» Apertura</strong></span></a></div>
    </div>

Slick旋转木马上重叠的div

0 个答案: