Bootstrap Карусель, поднимающий изображения и отбрасывающийся назад

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%; 
}