Previous not working with Bootstrap Carousel
Question
I have this responsive bootstrap carousel with 3 items (that move 1 at a time) on a regular screen, but when you press the previous button, it looks like the images in the carousel get tossed around. Is there any way to fix this / am I doing something wrong? I can't seem to find the error in the script.
<!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 answers
solution1
-1 2019-03-18 21:30:20
It has to do with the media browser window screen size. In small screen sizes (eg the code snippet) it works, but when you test the code in a bigger window size it doesn't work. Hence it has to do with the fact that the styling for @media (max-width: 767px) works fine, but for those of @media and above (eg @media (min-width: 992px )), the css tags are not complete. At first glance, I notice that there is no .active tags for the bigger screen sizes.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap Carousel previous and next buttons aren't working
Bootstrap Carousel Template not working
Bootstrap Carousel controls not working
Bootstrap Carousel not working in Chrome
Bootstrap carousel is not working in AJAX
Bootstrap 3 carousel and navbar not working
Bootstrap 3 carousel Positioning not working
Bootstrap Carousel Not working
Bootstrap Carousel is not working with the AngularJS
bootstrap carousel not working in firefox
Related Tags