以前无法与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.