1

boa tarde ou boa noite. Alguém poderia verificar o que está ocorrendo no meu código, inseri um carousel de acordo com o documento do Bootstrap 4 e mesmo assim ele não funciona, o carousel não está fazendo a troca de imagens fica parada somente na primeira imagem e não sai disso, já verifiquei no console do Google Chrome(inspecionar elemento) e não a nenhum erro, os js estão sendo lidos, ja coloquei o Scripts em forma de link igual está no site do Bootstrap e sem sucesso, segue o código.

Head:

<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<link href="css/style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" href="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" href="js/bootstrap.min.js"></script>
<script type="text/javascript" href="js/popper.js"></script>
<script type="text/javascript" href="js/achive.js"></script>
<title> - </title>

Código do carousel:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="1500">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img/img1.jpg" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/img2.jpg" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="img/img3.png" alt="Third slide">
    </div>
  </div>
</div>

jQuery usado: https://code.jquery.com/jquery-3.4.1.min.js Bootstrap 4 js usado: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js Popper usado: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.js

Desde já, muito obrigado.

2
  • O que não funciona? Aparência? Comportamento? Aparece algum erro no console do browser? Verificou se os arquivos CSS e JS linkados no <head> estão sendo carregados corretamente? Por favor edite a pergunta.
    – bfavaretto
    Commented 26/06/2019 às 14:48
  • Obrigado pela sinalização, já ajustei a pergunta.
    – blackstv1
    Commented 26/06/2019 às 14:57

1 Resposta 1

1

Seu problema é que vc escreve o link do JS errado. Além do não seguir a formatação básica do template sugerida pelo Bootstrap onde os scripts devem vir no final do documento...

Aqui está um Template base indicado pela própria documentação oficial do Bootstrap. Repare que além do jQuery, eles também indicam que todos os .js devem vir ao final do documento, e a ordem seria jquery/popper/bootstrap https://getbootstrap.com/docs/4.3/getting-started/introduction/?#starter-template

Vc escreveu href="js/popper.js"

<script type="text/javascript" href="js/popper.js"></script>

Mas deve ser com src=""

<script type="text/javascript" src="js/popper.js"></script>

Olha ai funcionando

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
<style>

</style>
</head>

<body>

    <div class="container">
        <div class="row">

            <div class="col-12 col-sm-6 col-md-6">
                <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="500">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img class="d-block w-100" src="https://placecage.com/100/100" alt="First slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="https://placecage.com/100/105" alt="Second slide">
                        </div>
                        <div class="carousel-item">
                            <img class="d-block w-100" src="https://placecage.com/105/100" alt="Third slide">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>

</html>

OBS: Outro coisa é que na tag <script> no HTML5 moderno vc nem precisa mais declara o type="text/javascript", pode retira-lo da tag se quiser... Leia mais aqui Realmente é necessário colocar "text/javascript" na tag <script>?

2
  • Meu deus que vergonha, não vi mesmo já estava ficando frustrado, muito obrigado funcionou! KK
    – blackstv1
    Commented 26/06/2019 às 15:30
  • @blackstv1 sem problemas meu caro que bom que resolveu ai. Considere seguir o que diz a documentação e passar seus script para o final do documento e não no <head> []'s
    – hugocsl
    Commented 26/06/2019 às 15:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .