我不明白为什么我的轮播中的幻灯片不可见

Question

我是Java的新手，我不知道为什么我的CarouFredSel插件的幻灯片不可见...我一直在尝试使其工作数小时，但没有成功。

我制作了内容，将其放入容器中，然后在容器上启动了carouFredSel函数。 现在幻灯片中的内容没有出现。

HTML：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="jquery-1.12.1.js"></script>
        <script type="text/javascript" src="jquery.carouFredSel-6.2.1.js"></script>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>

        <div id="carousel-wrapper">
            <div class="slide" id="slide-1">
                <div class="slider-container">
                    <div class="content-container">
                           <h1>Header</h1>
                           <p>Paragraph text.</p>
                    </div>
                </div>
            </div>
            <div class="slide" id="slide-2">
                <div class="slider-container">
                    <div class="content-container">
                        <h1>Header</h1>
                        <p>Paragraph text.</p>
                    </div>
                </div>
            </div>
            <div class="slide" id="slide-3">
                <div class="slider-container">
                    <div class="content-container">
                        <h1>Header</h1>
                        <p>Paragraph text.</p>
                    </div>
                </div>
            </div>
            <div class="slide" id="slide-4">
                <div class="slider-container">
                    <div class="content-container">
                        <h1>Header</h1>
                        <p>Paragraph text.</p>
                    </div>
                </div>
            </div>
            <div class="slide" id="slide-5">
                <div class="slider-container">
                    <div class="content-container">
                        <h1>Header</h1>
                        <p>Paragraph text.</p>
                    </div>
                </div>
            </div>
        </div>

        <script>
            $(document).ready(function() {

                // Using default configuration
                $("#carousel-wrapper").carouFredSel();
            });
        </script>
    </body>
</html>

CSS：

body {
    margin: 0;
}

.slide {
    width: 100%;
    height: 500px;
}

.content-container {
    display: inline-block;
    margin-left: 23%;
    margin-top: 197px;
}

h1 {
    margin: 0;
}

该功能肯定是正在执行并刷新幻灯片，但内容不可见。 非常感谢帮助。 谢谢。

Answer 1

拆下

.content-container {
  display: inline-block;
  margin-left: 23%;
  margin-top: 197px;
}

似乎解决了。 特别是margin-left 。 如果您不完全了解CSS上下文，请尝试不使用它们。 这是工作中的小提琴 。

Answer 2

尝试这个：

$(window).load(function() {
    $("#carousel-wrapper").carouFredSel();
});

我不明白为什么我的轮播中的幻灯片不可见

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-03-07 21:16:59

解决方案2
-2 2016-03-07 21:13:04

我不明白为什么我的轮播中的幻灯片不可见

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-03-07 21:16:59

解决方案2 -2 2016-03-07 21:13:04

解决方案1
1 已采纳 2016-03-07 21:16:59

解决方案2
-2 2016-03-07 21:13:04