Question

我正在制作一个自举旋转木马，除了一点之外它还能正常工作。每当幻灯片更改时，新幻灯片都是旧幻灯片的两倍。当幻灯片变为活动状态时，图像会下降到正确的位置。

这就是我所拥有的。

    <div id="carousel-id" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carousel-id" data-slide-to="0" class="active"></li>
            <!-- <li data-target="#carousel-id" data-slide-to="1" class=""></li> -->
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img alt="First slide" src="images/surf2.png" style="margin-left: auto; margin-right: auto; padding-top: 15px;">
                <div class="container" style="text-align: center;">
                    <h1>One Microsoft Story for Healthcare</h1>
                    <p><a href="#" >Connect ></a> &nbsp<a href="#" >Request a Demo ></a>  </p>
                </div>
            </div>
             <div class="item">
                 <img alt="First slide" src="images/tablet2.png" style="padding-top: 15px; margin-left: auto; margin-right: auto;">
                 <div class="container" style="text-align: center;">
                     <h1>One Microsoft Story for Healthcare</h1>
                     <p><a href="#" >Connect ></a> &nbsp<a href="#" >Request a Demo ></a>  </p>
                 </div>
            </div>
        </div>

        <a class="left carousel-control" href="#carousel-id" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#carousel-id" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>

Answer 1

在...中将顶部位置从0更改为10px

.carousel-inner > .next,
.carousel-inner > .prev {
    position: absolute;
    top: 10px;
    width: 100%;
}

Answer 2

我遇到了同样的问题，删除'slide'类似乎对我有用。

Bootstrap Carousel提升图像并退回

2 个答案: