Slide on Bootstrap does not work

Asked

Viewed 341 times

1

good afternoon or good night. Someone could check what’s going on in my code, insert a Carousel according to the Bootstrap 4 document and even then it doesn’t work, Carousel isn’t doing the image exchange gets stopped only at the first image and doesn’t come out of it, I have already checked on the console of Google Chrome(inspect element) and no error, js are being read, already put the Scripts in form of link equal is on the site of Bootstrap and unsuccessfully, follows the code.

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>

Code of the 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 used: https://code.jquery.com/jquery-3.4.1.min.js Bootstrap 4 js used: https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js Popper used: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.js

From now on, thank you very much.

javascript jquery carousel

  • What doesn’t work? Appearance? Behavior? Is there an error in the browser console? Have you checked if the CSS and JS files linked to the <head> are being loaded correctly? Please edit the question.

  • Thanks for the sign, I’ve adjusted the question.

1 answer

1


Your problem is that you write the JS link wrong. In addition to not following the basic template formatting suggested by Bootstrap where scripts should come at the end of the document...

Here is a Base Template indicated by the official Bootstrap documentation itself. Note that besides jQuery, they also indicate all . js must come at the end of the document, and the order would be jquery/Popper/bootstrap https://getbootstrap.com/docs/4.3/getting-started/introduction/? #Starter-template

You wrote href="js/popper.js"

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

But it must be with src=""

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

Look at it working

<!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: Another thing is that in the tag <script> in modern HTML5 you no longer need to declare the type="text/javascript", can remove it from the tag if you want... read more here You really need to put "text/javascript" in <script tag>?

  • My God what a shame, I didn’t even see I was getting frustrated, thank you very much worked! KK

  • @blackstv1 without problems my dear I’m glad you solved there. Consider following what the documentation says and passing your script to the end of the document and not in the <head> []’s

Browser other questions tagged javascript jquery carousel

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