Problems with Carousel Bootstrap

Asked

Viewed 68 times

0

I’ve been trying for hours to use Bootstrap’s Carousel to display products. I did it myself didn’t work, so I found this code https://codepen.io/kreigd/pen/ybYNoN I put in a file alone, separate from the site I’m developing and it doesn’t even work. It looks like this.

inserir a descrição da imagem aqui

I really need to finish this job, which will help pay for my college! Follow my code:

    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

      <div class="container-fluid">
      <h1 class="text-center mb-3">Bootstrap Multi-Card Carousel</h1>
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
         <div class="carousel-inner row w-100 mx-auto">
            <div class="carousel-item col-md-4 active">
            <div class="card">
               <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f44242/fff" alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title">Card 1</h4>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
               </div>
            </div>
            </div>
            <div class="carousel-item col-md-4">
            <div class="card">
               <img class="card-img-top img-fluid" src="http://placehold.it/800x600/418cf4/fff" alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title">Card 2</h4>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
               </div>
            </div>
            </div>
            <div class="carousel-item col-md-4">
            <div class="card">
               <img class="card-img-top img-fluid" src="http://placehold.it/800x600/3ed846/fff" alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title">Card 3</h4>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
               </div>
            </div>
            </div>
            <div class="carousel-item col-md-4">
            <div class="card">
               <img class="card-img-top img-fluid" src="http://placehold.it/800x600/42ebf4/fff" alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title">Card 4</h4>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
               </div>
            </div>
            </div>
            <div class="carousel-item col-md-4">
            <div class="card">
               <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f49b41/fff" alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title">Card 5</h4>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
               </div>
            </div>
            </div>
            <div class="carousel-item col-md-4">
            <div class="card">
               <img class="card-img-top img-fluid" src="http://placehold.it/800x600/f4f141/fff" alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title">Card 6</h4>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
               </div>
            </div>
            </div>
            <div class="carousel-item col-md-4">
            <div class="card">
               <img class="card-img-top img-fluid" src="http://placehold.it/800x600/8e41f4/fff" alt="Card image cap">
               <div class="card-body">
                  <h4 class="card-title">Card 7</h4>
                  <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                  <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
               </div>
            </div>
            </div>
         </div>
         <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
         </a>
         <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
         </a>
      </div>
      </div>

      <script>
   $(document).ready(function() {
  $("#myCarousel").on("slide.bs.carousel", function(e) {
    var $e = $(e.relatedTarget);
    var idx = $e.index();
    var itemsPerSlide = 3;
    var totalItems = $(".carousel-item").length;

    if (idx >= totalItems - (itemsPerSlide - 1)) {
      var it = itemsPerSlide - (totalItems - idx);
      for (var i = 0; i < it; i++) {
        // append slides to end
        if (e.direction == "left") {
          $(".carousel-item")
            .eq(i)
            .appendTo(".carousel-inner");
        } else {
          $(".carousel-item")
            .eq(0)
            .appendTo($(this).find(".carousel-inner"));
        }
      }
    }
  });
});
</script>
   <!-- Optional JavaScript -->
   <!-- jQuery first, then Popper.js, then Bootstrap JS -->
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
javascript css

  • And the jQuery, you imported?

  • Ah! I forgot to post here in the footer. <! -- Optional Javascript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" Integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKKp4YfRvH+8abTE1Pi6jizo" crossorigin="Anonymous">></script>

  • that e... <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" Integrity="sha384-Uo2et0cphqdsjq6hjty5kvphtphzwj9wo1clhtmga3jdzwrnq4sf86dihndz0w1" crossorigin="Anonymous"></script script>

  • <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" Integrity="sha384-Jjsmvgyd0p3pxb1rribzuoiiy6orq6vrjieaff/nJGzIxFDsf4x0xIM+B07jrm" crossorigin="Anonymous"></script>

  • It looks like this URL: http://equipenovainfo.com.br/_portifolio/Amanda/31_07_2019/carousel_prod.php

  • You need to import jQuery before declaring your code, otherwise you will get type errors $ is not defined, because you’re trying to use jQuery ($) before it is loaded on the page.

  • It’s just that in the template I see the scripts downstairs.

  • I imported it, I put it in the header and nothing.

  • Solved! I was able to download the code in Codepen and it worked! It must have been depending on something the developer left in the folders.

  • This example you used uses custom CSS. Note that if you decrease the width of your site window to a lower value than the col-md it will work normally, but if the width is larger, you will need the same CSS you have in this codepen.

  • True! I get it. I even noticed, the problem now is that the page has two Carousel (because it has one at the top as a slide), I think about customizing the first one. Thanks for the support.

  • Because they clash on the same page?

Show 7 more comments
No answers

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.