ブートストラップカルーセルスライド「アイテムアクティブ」ジャンプ先

Question

グッドイブニング。

私はカルーセルスライドに問題があります。 開始時、すべてのスライドジャンプフォームトップ+ - 5ピクセルダウン。 は、だから私は、これを変更：

.carousel-inner > .prev { 
    position: absolute; 
    top: 0; 
    width: 880px; 
} 

今これは修正されました

.carousel-inner > .prev { 
    position: absolute; 

    width: 880px; 
} 

に。 唯一の問題は、クラスアイテムとアクティブなスライドが今すぐジャンプすることです。 しかし、私はこれを修正するために何かを見つけることはありません。

は私のCSSのTheresの：

.carousel { 
    position: relative; 
} 
.carousel-inner { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    padding-right: 35px; 
} 
.carousel-inner > .item { 
    position: relative; 
    display: none; 
    -webkit-transition: .6s ease-in-out left; 
     -o-transition: .6s ease-in-out left; 
      transition: .6s ease-in-out left; 
} 
.carousel-inner > .item > img, 
.carousel-inner > .item > a > img { 
    line-height: 1; 
} 
@media all and (transform-3d), (-webkit-transform-3d) { 
    .carousel-inner > .item { 
    -webkit-transition: -webkit-transform .6s ease-in-out; 
     -o-transition:  -o-transform .6s ease-in-out; 
      transition:   transform .6s ease-in-out; 

    -webkit-backface-visibility: hidden; 
      backface-visibility: hidden; 
    -webkit-perspective: 1000px; 
      perspective: 1000px; 
    } 
    .carousel-inner > .item.next, 
    .carousel-inner > .item.active.right { 
    left: 0; 
    -webkit-transform: translate3d(100%, 0, 0); 
      transform: translate3d(100%, 0, 0); 
    } 
    .carousel-inner > .item.prev, 
    .carousel-inner > .item.active.left { 
    left: 0; 
    -webkit-transform: translate3d(-100%, 0, 0); 
      transform: translate3d(-100%, 0, 0); 
    } 
    .carousel-inner > .item.next.left, 
    .carousel-inner > .item.prev.right, 
    .carousel-inner > .item.active { 
    left: 0; 
    -webkit-transform: translate3d(0, 0, 0); 
      transform: translate3d(0, 0, 0); 
    } 
} 
.carousel-inner > .active, 
.carousel-inner > .next, 
.carousel-inner > .prev { 
    display: block; 
} 
.carousel-inner > .active { 
    left: 0; 
} 
.carousel-inner > .next, 
.carousel-inner > .prev { 
    position: absolute; 

    width: 880px; 
} 
.carousel-inner > .next { 
    left: 100%; 
} 
.carousel-inner > .prev { 
    left: -100%; 
} 
.carousel-inner > .next.left, 
.carousel-inner > .prev.right { 
    left: 0; 
} 
.carousel-inner > .active.left { 
    left: -100%; 
} 
.carousel-inner > .active.right { 
    left: 100%; 
} 

そしてHERESに私のカルーセルコード：

<div class="carousel slide" id="myCarousel"> 

     <div class="carousel-inner"> 
      <div class="item active"> 
        <ul class="thumbnails"> 
         <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 

        </ul> 
       </div><!-- /Slide1 --> 
      <div class="item"> 
        <ul class="thumbnails"> 
         <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 


        </ul> 
       </div><!-- /Slide2 --> 
      <div class="item"> 
        <ul class="thumbnails"> 
         <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 
          <li class="col-md-3"> 
          <div class="thumbnail"> 
           <a href="#"><img src="http://puu.sh/nOpej/23914acabc.png" alt=""></a> 
          </div> 
          <div class="caption"> 
           <h4>BMW</h4><hr> 
           <h5>i8 Lux Car Performance</h5> 
           <span style="float:left;">Prix:</span><span style="float:right;">25.000€</span><br> 
           <span style="float:left;">Kilometrage:</span><span style="float:right;">12.000 km</span><br> 
          <span style="float:left;">Erstzulassung:</span><span style="float:right;">5/2015</span> 
          <a class="btn btn-mini" href="#">&raquo; Read More</a> 
          </div> 
          </li> 

        </ul> 
       </div><!-- /Slide3 --> 
     </div> 

     <div class="control-box">        

      <br> <a data-slide="prev" href="#myCarousel" style="float:left; padding-left:5px;"><button type="button" class="btn btn-primary">Previous</button></a> 
      <a data-slide="next" href="#myCarousel" style="float:right; padding-right:5px;"><button type="button" class="btn btn-primary">Next</button></a> 
     </div><!-- /.control-box --> 

    </div><!-- /#myCarousel --> 

ありがとうございました！

敬具 Merkesアンディ

Answer 1

は完璧なソリューションではないかもしれないが、私はそれはまだ今すべてのスライドはジャンプ

.carousel-inner > .prev { 
    position: absolute; 
} 

Demo Bootply