Question

我是网络开发的新手，我可能只有一个问题。我几乎尽我所能，但它仍然无法正常工作。

这就是我要找的IMAGE

这是我的代码

<div class="color"> <!-- white background with green borders -->
    <div class="all"> 

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Slider Content (Wrapper for slides )-->

            <div class="carousel-inner">

                <div class="containter item active">
                    <div class="row">

                        <div class="col-md-4">
                            <p>my text ...</p>    
                        </div>

                        <div class="col-md-4">
                            <div class="my-image_1"></div>
                        </div>

                        <div class="col-md-4">
                            <p>my text ...</p>
                        </div>

                    </div><!-- /row -->

                </div><!-- /container item -->

    <!-- ============================================ -->

                <div class="containter item">
                    <div class="row">

                        <div class="col-md-4">
                            <p>my text ...</p>    
                        </div>

                        <div class="col-md-4">
                            <div class="my-image_2"></div>
                        </div>

                        <div class="col-md-4">
                            <p>my text ...</p>
                        </div>

                    </div><!-- /row -->

                </div><!-- /container item -->

    <!-- ============================================ -->

                <div class="containter item">
                    <div class="row">

                        <div class="col-md-4">
                            <p>my text ...</p>    
                        </div>

                        <div class="col-md-4">
                            <div class="my-image_3"></div>
                        </div>

                        <div class="col-md-4">
                            <p>my text ...</p>
                        </div>

                    </div><!-- /row -->

                </div><!-- /container item -->    

            </div> <!-- carousel-inner -->
        </div> <!-- carousel -->

    </div><!-- /all -->
</div><!-- color -->

和Css

.my-image_1 {
  background-image: url(../img/my-image_1.png);
  width: 103px;
  height:  678px;
}

.my-image_2 {
  background-image: url(../img/my-image_2.png);
  width: 113px;
  height:  678px;
}

.my-image_2 {
  background-image: url(../img/my-image_3.png);
  width: 203px;
  height:  678px;
}

.color {
  background-color: white;
  height: 590px;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
}

我试图更改自定义bootstrap的样式边距等，但我没有结果我不会。

对于任何帮助，我将非常感激。

=============================================== =================

tchow002

我已经这样做了。旋转木马工作正常，但我有位置指示器和白色背景的问题。这就是我browser

=============================================== =================

Answer 1

您必须初始化您的轮播。

添加此js：

$(document).ready(function(){
  $('.carousel').carousel();
});

Bootstrap 3 Carousel位置指示器内部

1 个答案: