以前無法與Bootstrap Carousel一起使用
[英]Previous not working with Bootstrap Carousel
問題描述
我在常規屏幕上有一個帶有3個項（一次移動1個）的響應式自舉輪播，但是當您按上一個按鈕時，輪播中的圖像看起來像亂七八糟。 有什么辦法可以解決這個/我做錯了什么嗎？ 我似乎在腳本中找不到錯誤。
<!DOCTYPE html> <html> <head> <title>Bootstrap Carousel</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script> jQuery(document).ready(function() { jQuery('.carousel[data-type="multi"] .item').each(function(){ var next = jQuery(this).next(); if (!next.length) { next = jQuery(this).siblings(':first'); } next.children(':first-child').clone().appendTo(jQuery(this)); for (var i=0;i<1;i++) { next=next.next(); if (!next.length) { next = jQuery(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } }); }); </script> <style> .carousel-control.left, .carousel-control.right { background-image:none; } .img-responsive{ width:100%; height:100%; } @media (min-width: 992px ) { .carousel-inner .active.left { left: -33.33333%; } .carousel-inner .next { left: 33.33333%; } .carousel-inner .prev { left: -33.33333%; } } @media (min-width: 768px) and (max-width: 991px ) { .carousel-inner .active.left { left: -33.3%; } .carousel-inner .next { left: 33.3%; } .carousel-inner .prev { left: -33.3%; } .active > div:first-child { display:block; } .active > div:first-child + div { display:block; } .active > div:last-child { display: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; } } </style> </head> <body> <div class="container"> <h1>Bootstrap Multiple image sliding demo</h1> <!--The main div for carousel--> <div class="container text-center"> <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> </div> <a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Bootstrap Carousel</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script> jQuery(document).ready(function() { jQuery('.carousel[data-type="multi"] .item').each(function(){ var next = jQuery(this).next(); if (!next.length) { next = jQuery(this).siblings(':first'); } next.children(':first-child').clone().appendTo(jQuery(this)); for (var i=0;i<1;i++) { next=next.next(); if (!next.length) { next = jQuery(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this)); } }); }); </script> <style> .carousel-control.left, .carousel-control.right { background-image:none; } .img-responsive{ width:100%; height:100%; } @media (min-width: 992px ) { .carousel-inner .active.left { left: -33.33333%; } .carousel-inner .next { left: 33.33333%; } .carousel-inner .prev { left: -33.33333%; } } @media (min-width: 768px) and (max-width: 991px ) { .carousel-inner .active.left { left: -33.3%; } .carousel-inner .next { left: 33.3%; } .carousel-inner .prev { left: -33.3%; } .active > div:first-child { display:block; } .active > div:first-child + div { display:block; } .active > div:last-child { display: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; } } </style> </head> <body> <div class="container"> <h1>Bootstrap Multiple image sliding demo</h1> <!--The main div for carousel--> <div class="container text-center"> <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval=false id="fruitscarousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> <div class="item"> <div class="col-md-4 col-sm-4 col-xs-12"><a href="#"><img src="http://lorempixel.com/650/200/" class="img-responsive"></a></div> </div> </div> <a class="left carousel-control" href="#fruitscarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control" href="#fruitscarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div> </body> </html>
1 個解決方案
解決方案1
-1 2019-03-18 21:30:20
它與媒體瀏覽器窗口的屏幕尺寸有關。 在較小的屏幕尺寸（例如代碼段）中，它可以工作，但是在較大的窗口尺寸中測試代碼時，它不起作用。 因此，這與以下事實有關：@media（max-width：767px）的樣式可以正常工作，但是對於@media及更高版本的樣式（例如@media（min-width：992px）），css標記不是完成。 乍一看，我注意到沒有用於更大屏幕尺寸的.active標簽。
Bootstrap Carousel 上一個和下一個按鈕不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.