Jump to content
DinhoPHP

Problemas com Carousel Bootstrap no JS

Recommended Posts

estou há horas tentando utilizar o Carousel do Bootstrap para exibir produtos. Fiz sozinho não funcionou, então encontrei este código https://codepen.io/kreigd/pen/ybYNoN coloquei em um arquivo sozinho, separado do site que estou desenvolvendo e nem assim funciona. Fica assim: http://equipenovainfo.com.br/_portifolio/amanda/31_07_2019/carousel_prod.php

 

Segue o código:

<!doctype html>
<html lang="pt-br">
  <head>
   <!-- Required meta tags -->
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <title>Hello, world!</title>
   <!-- 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">
   <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    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>
   <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>

  </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>

Preciso terminar esse trabalho, travei nisso. Me ajudará à pagar a faculdade e ganharei tempo para estudar. 

Share this post


Link to post
Share on other sites

@DinhoPHP O que falto na sua página para o carrossel funcionar foi o CSS.

@media (min-width: 768px) {
  /* show 3 items */
  .carousel-inner .active,
  .carousel-inner .active + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item {
    display: block;
  }

  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
  }

  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -33.3333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}

 

Share this post


Link to post
Share on other sites

@gabrielms Notei que esse carousel está utilizando esta versão do Bootstrap:

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

E no head da minha página esta:

<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">

 

Inseri a última versão na página do carousel e o erro voltou, porém ao retirar e deixar apenas a versão anterior o carousel volta a funcionar.

 

Esse arquivo Carousel está funcionando com a seguinte configuração

<!-- NO CABEÇALHO DO ARQUIVO CAROUSEL -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css'>

 

<!-- NO RODAPÉ DO ARQUIVO CAROUSEL -->

<script src='https://code.jquery.com/jquery-1.12.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js'></script>
<script  src="script.js"></script>

 

O site está funcionando com a seguinte configuração

<!-- NO CABEÇALHO DO SITE -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

<!-- NO RODAPÉ DO SITE -->

<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>

Share this post


Link to post
Share on other sites

@DinhoPHP Bom eu não sei bem se o problema realmente e o Bootstrap.

 

Você tem um erro de PHP PDO na sua página 

Erro: SQLSTATE[28000] [1045] Access denied for user 'root'@'localhost' (using password: NO)

E o código HTML está todo bugado.

image.thumb.png.5c2ccc5f3c07f53b0dfbc4e0ec19316b.png

 

Ainda tem os erros no console.

Failed to load resource: the server responded with a status of 404 (Not Found)
owl.theme.default.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
logo.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
owl.carousel.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
owl.theme.default.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)

Tenta resolver isso, esses bugs devem ser o problema do seu carrossel.

Share this post


Link to post
Share on other sites

Sim, Sim! @gabrielms até então. Esse de PDO pode ser ignorado, em localhost não aparece. Tive esses problemas ao tentar colocar mais slides. Preciso de algo como nos vídeos do YouTube, aquela galeria. Mas obrigado!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By stefanyprs
      //modelo.html <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Hora do dia</title>     <link rel="stylesheet" href="estilo.css"> </head> <body onload="carregar()">     <header>         <h1> Hora do dia </h1>         </h1>     </header>     <section>         <div id="msg">             msg         </div>         <div id="foto">             <img class="imagem" src="fotomanha.jpg" alt="foto do dia">         </div>     </section>     <footer>         <p>&copy; Rodapé </p>     </footer>     <script src="script.js"></script> </body> </html>   //script.js function carregar () {     var msg = window.document.getElementById('msg')     var img  = window.document.getElementsByClassName('imagem')      var data = new Date()     var hora = data.getHours()          msg.innerHTML = 'Agora são ' + hora + ' horas'          if (hora >= 0 && hora < 12){         //Bom dia         img.src = 'fotomanha.jpg'         } else if (hora >= 12 && hora < 18){         //Boa tarde         img.src = 'fototarde.jpg'      } else {         //Boa noite         img.src = 'fotonoite.jpg'     } }   //estilo.css body{     background-color: aqua;     font: normal 15pt Arial; } header{     color:rgb(255, 255, 255);     text-align: center; } section{     background: white;     border-radius: 10px;     padding: 15px;     width: 500px;     margin:auto;     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329);      } footer{     color:white;     text-align: center;     font-style: italic;   } div{     text-align: center; } .imagem{     width: 500px;    /* largura da imagem */     height: 350px;   /*  altura da imagem  */     margin-top: 10px; /* margem do topo */ }
    • By leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    • By WitherZx
      estou cursando na Rocketseat, e um dos exercícios de la é fazer um sisteminha de conversão de notas, de numérico para alfabético, eu fiz o exercício de duas formas, uma deu certo (com if's), porem quando tentei usar switch, deu erro, sempre caia em 'default', como posso resolver? ps: eu não quero ver a solução do vídeo pq lá provavelmente vai ensinar com if's, e isso eu já sei.
       
      function ConverteNota(nota) {     nota = Number(nota)     let notaA = (nota >= 9 && nota <= 10);     let notaB = (nota >= 8 && nota < 9);     let notaC = (nota >= 7 && nota < 8);     let notaD = (nota >= 6 && nota < 7);     let notaF = (nota < 6 && nota >= 0);       switch (nota) {         case notaA:             console.log('Nota A');             break;           case notaB:             console.log('Nota B');             break;           case notaC:             console.log('Nota C');             break;           case notaD:             console.log('Nota D');             break;           case notaF:             console.log('nota F');             break;           default:             console.log('insira uma nota valida!')             break;     }; };   ConverteNota(10);
    • By WitherZx
      estou cursando na Rocketseat, e um dos exercícios de la é fazer um sisteminha de conversão de notas, de numérico para alfabético, eu fiz o exercício de duas formas, uma deu certo (com if's), porem quando tentei usar switch, deu erro, sempre caia em 'default', como posso resolver? ps: eu não quero ver a solução do vídeo pq lá provavelmente vai ensinar com if's, e isso eu já sei.
       
      function ConverteNota(nota) {     nota = Number(nota)     let notaA = (nota >= 9 && nota <= 10);     let notaB = (nota >= 8 && nota < 9);     let notaC = (nota >= 7 && nota < 8);     let notaD = (nota >= 6 && nota < 7);     let notaF = (nota < 6 && nota >= 0);       switch (nota) {         case notaA:             console.log('Nota A');             break;           case notaB:             console.log('Nota B');             break;           case notaC:             console.log('Nota C');             break;           case notaD:             console.log('Nota D');             break;           case notaF:             console.log('nota F');             break;           default:             console.log('insira uma nota valida!')             break;     }; };   ConverteNota(10);
    • By Sapinn
      Pessoa de novo eu aqui kk. Acho que essa pergunta é simples mas eu não sei como fazer, já pesquisei em vários cantos mas só achei a resposta em Jquery e eu queria fazer em Javascript puro. Basicamente eu gostaria de transferir dados de uma tabela para um form eu já consegui fazer mas só funciona em um td e eu gostaria nos outros não funcionam. 
      <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title> </head> <body>     <table border="1px">         <tr>             <td>Nome</td>             <td>Endereço</td>             <td>Telefone</td>             <td>Adicionar</td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Sapinn</td>             <td id="endereco_cliente" value="Rua 01">Rua 01</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 9999-9999</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>         <tr>             <td id="nome_cliente" value="Sapien">Supremo</td>             <td id="endereco_cliente" value="Rua 01">Rua 05</td>             <td id="tel_cliente" value="(88) 9 9999-9999">(88)9 0000-0000</td>             <td><button onclick="adicionar()">Adicionar</button></td>         </tr>     </table><br><br>     Nome:<input type="text" name="nome" id="nome">     Telefone: <input type="text" name="telefone" id="telefone">     Endereço: <input type="text" name="endereco" id="endereco">     <script>         function adicionar(){                         let nome_cliente = document.getElementById("nome_cliente").innerHTML;             let endereco_cliente = document.getElementById("endereco_cliente").innerHTML;             let tel_cliente = document.getElementById("tel_cliente").innerHTML;             document.getElementById('nome').value = nome_cliente;             document.getElementById('telefone').value = tel_cliente;             document.getElementById('endereco').value = endereco_cliente;             console.log(nome_cliente, endereco_cliente, tel_cliente)                      }     </script> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.