Bootstrap 3輪播有6個項目無法使用

Question

我一直在將這種解決方案用於6個項目的輪播。

這在Dreamweaver中效果很好，但是在網上預覽或發布時，逐項前進的效果不正確。 盡管它確實前進了一個項目，但它也會滑動之前的所有項目。

看一下此鏈接，滑塊在頁面底部。

如果有人遇到類似問題，請指出正確的方向。

我已經非常努力地解決了這個問題。 我唯一想到的是它沒有響應md或lg屏幕大小，因為您可以通過在xs sm @media查詢后弄亂屏幕寬度來在原始Bootply示例中重新創建問題。

 $('.carousel[data-type="multi"] .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=0;i<4;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } }); 

 .carousel-control { width: 4%; } .carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;} @media (max-width: 767px) { .carousel-inner .active.left { left: -100%; } .carousel-inner .next { left: 100%; } .carousel-inner .prev { left: -100%; } .active > div { display:none; } .active > div:first-child { display:block; } } @media (min-width: 767px) and (max-width: 992px ) { .carousel-inner .active.left { left: -50%; } .carousel-inner .next { left: 50%; } .carousel-inner .prev { left: -50%; } .active > div { display:none; } .active > div:first-child { display:block; } .active > div:first-child + div { display:block; } } @media (min-width: 992px) { .carousel-inner .active.left { left: -16.66666667%; } .carousel-inner .next { left: 16.66666667%; } .carousel-inner .prev { left: -16.66666667%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-12"> <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/1.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/2.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/3.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/4.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/5.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/6.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/7.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/8.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/9.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/4.jpg" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="images/logos/6.jpg" class="img-responsive"></a></div> </div> </div> </div> </div> 

Answer 1

事實是自定義CSS的CSS選擇器和Bootstrap的特異性都相同。 因此，最后包含的CSS具有優先權。 如果這是Bootstrap，則自定義CSS將被覆蓋，並且滑塊將不會按照您期望的方式運行。

為了確保自定義CSS具有優先級，您可以使其選擇器更具體。 在下面的示例中，我通過向每個選擇器添加一個附加的.carousel來實現。

可以在以下位置找到有關CSS選擇器特異性的更多信息： https : //developer.mozilla.org/en-US/docs/Web/CSS/Specificity

此外，正如makshh所指出的，與您在網站上使用的Bootstrap（3.1.0）相比，您鏈接的方法使用的是Bootstrap（3.1.0）的舊版本。 在某些瀏覽器中，新的引導程序對輪播的處理方式與以前的版本不同。 如果要支持Webkit瀏覽器，則需要使用舊版本的Bootstrap或根據正在使用的新CSS Bootstrap 3.3.5調整解決方案。

 $('.carousel[data-type="multi"] .item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); for (var i=0;i<4;i++) { next=next.next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } }); 

 @media all and (max-width: 767px) { .carousel .carousel-inner .active.left { left: -100%; } .carousel .carousel-inner .next { left: 100%; } .carousel .carousel-inner .prev { left: -100%; } .carousel .active > div { display: none; } .carousel .active > div:first-child { display: block; } } @media all and (min-width: 767px) and (max-width: 992px) { .carousel .carousel-inner .active.left { left: -50%; } .carousel .carousel-inner .next { left: 50%; } .carousel .carousel-inner .prev { left: -50%; } .carousel .active > div { display: none; } .carousel .active > div:first-child { display: block; } .carousel .active > div:first-child + div { display: block; } } @media all and (min-width: 992px) { .carousel .carousel-inner .active.left { left: -16.66666667%; } .carousel .carousel-inner .next { left: 16.66666667%; } .carousel .carousel-inner .prev { left: -16.66666667%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-md-12"> <div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> <div class="item"> <div class="col-md-2 col-sm-6 col-xs-12"> <a href="#"><img src="http://www.lorempixel.com/200/200" class="img-responsive"></a> </div> </div> </div> </div> </div>