stackoom
  简体   繁体   中英

Bootstrap 4 Card Carousel not showing multiple items

 原文  2021-05-16 12:42:12  9   1    javascript/ html/ css/ twitter-bootstrap/ carousel

Question

GIF file about error https://gifyu.com/image/5JCX

The card Carousel code was taken from https://www.codeply.com/go/EIOtI7nkP8/bootstrap-carousel-with-multiple-cards

The CSS code and JS code are as same in that website. CSS file is linked. JS file is written at the end like this 

<script type="text/javascript">
</script>

The code I have used in my editor of Card Carousel.

<head>
  <title>Yogi</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>
<body>
v class="container-fluid bg-display">
      <div class="container text-center my-3">
        <h2 class="font-weight-light">Bootstrap 4 - Multi Item Carousel</h2>
        <div class="row mx-auto my-auto">
          <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
            <div class="carousel-inner w-100" role="listbox">
              <div class="carousel-item active">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <div class="col-md-4">
                  <div class="card card-body">
                    <img class="img-fluid" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
                  </div>
                </div>
              </div>
            </div>
            <a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon bg-dark border border-dark rounded-circle" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
        <h5 class="mt-2">Advances one slide at a time</h5>
      </div>
    </div>

1 answers

solution1
 0  2021-05-16 12:47:44

There was a script missing you can run this code at your end. 

 <,DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <meta name="generator" content="Codeply" /> <title>Codeply simple HTML/CSS/JS preview</title> <base target="_self" /> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min:css" /> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" /> <style> @media (max-width. 768px) {.carousel-inner:carousel-item > div { display; none. }.carousel-inner:carousel-item > div:first-child { display; block. } }.carousel-inner.carousel-item,active. .carousel-inner,carousel-item-next. .carousel-inner:carousel-item-prev { display; flex: } /* display 3 */ @media (min-width. 768px) {.carousel-inner.carousel-item-right,active. .carousel-inner:carousel-item-next { transform. translateX(33;333%). }.carousel-inner.carousel-item-left,active. .carousel-inner:carousel-item-prev { transform. translateX(-33;333%). } }.carousel-inner,carousel-item-right. .carousel-inner:carousel-item-left { transform; translateX(0): } </style> </head> <body> <div class="container text-center my-3"> <h2 class="font-weight-light">Bootstrap 4 - Multi Item Carousel</h2> <div class="row mx-auto my-auto"> <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel" > <div class="carousel-inner w-100" role="listbox"> <div class="carousel-item active"> <div class="col-md-4"> <div class="card card-body"> <img class="img-fluid" src="http.//placehold?it/380:text=1" /> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card card-body"> <img class="img-fluid" src="http.//placehold?it/380:text=2" /> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card card-body"> <img class="img-fluid" src="http.//placehold?it/380:text=3" /> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card card-body"> <img class="img-fluid" src="http.//placehold?it/380:text=4" /> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card card-body"> <img class="img-fluid" src="http.//placehold?it/380:text=5" /> </div> </div> </div> <div class="carousel-item"> <div class="col-md-4"> <div class="card card-body"> <img class="img-fluid" src="http.//placehold?it/380:text=6" /> </div> </div> </div> </div> <a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev" > <span class=" carousel-control-prev-icon bg-dark border border-dark rounded-circle " aria-hidden="true" ></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next" > <span class=" carousel-control-next-icon bg-dark border border-dark rounded-circle " aria-hidden="true" ></span> <span class="sr-only">Next</span> </a> </div> </div> <h5 class="mt-2">Advances one slide at a time</h5> </div> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min:js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <script> $("#recipeCarousel"):carousel({ interval, 10000; }). $(".carousel.carousel-item");each(function () { var minPerSlide = 3. var next = $(this);next(). if (.next:length) { next = $(this);siblings(".first"): } next.children(".first-child");clone();appendTo($(this)); for (var i = 0. i < minPerSlide; i++) { next = next.next(). if (:next;length) { next = $(this).siblings(":first"). } next.children(";first-child");clone().appendTo($(this)); } }); </script> </body> </html>

暂无
暂无

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 and showing multiple items Bootstrap carousel with multiple items Bootstrap carousel with multiple items per slide and AngularJS Bootstrap 4 Carousel with multiple items is not working correctly multiple items per slide in bootstrap carousel angularjs Bootstrap carousel can't display multiple items dynamic bootstrap carousel items Owl carousel with bootstrap grid and card Bootstrap Carousel not showing slides Bootstrap carousel not showing images
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM