web-dev-qa-db-fra.com

Le carrousel bootstrap 4 ne fonctionne pas

J'ai rencontré un problème avec le module de carrousel sur le bootstrap 4. Cela fait longtemps que je dépanne, mais je ne vais nulle part, alors je vais juste essayer de demander ici, j'espère que vous pourrez aider moi!

(J'ai déjà vérifié d'autres articles sur ce sujet mais pas de chance jusqu'à présent)

Sans plus tarder, voici le code:

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
    <script scr="/js/bootstrap.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
    $('#myCarousel').carousel({
    //options here
    });
});
    </script>

<body>

 <div class="container">
    <div id="carouselExampleIndicators" class="carousel slide span12" data-ride="carousel">
        <div class="row">
            <ol class="carousel-indicators">
                <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active" ></li>
                <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
                <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
            </ol>
        </div>
        <div class="row">
            <div class="carousel-inner" role="listbox">
                <div class="carousel-item active">
                <img class="d-block img-fluid" src="sfeer-kok-groente-snijden_5.jpg" alt="First slide">
                </div>
              <div class="carousel-item">
                    <img class="d-block img-fluid" src="img/diamond.png" alt="Second slide">
                </div>
                <div class="carousel-item">
                    <img class="d-block img-fluid" src="#" alt="Third slide">
                </div>
            </div>
        </div>
    </div>
    </div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
        integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
        crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
        integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
        crossorigin="anonymous"></script>
<script src="../../assets/js/vendor/holder.min.js"></script>
<script>
    $(function () {
        Holder.addTheme("thumb", {background: "#55595c", foreground: "#eceeef", text: "Thumbnail"});
    });
</script>
<script src="/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>

</body>
</html>

Merci d'avance!

javascriptjqueryhtmltwitter-bootstrap
5
Lars Mulder

Je vois deux problèmes principaux:

Premièrement, il semble que vous manquiez de la classe CSS bootstrap. Ajoutez-le dans votre élément <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

Selon la documentation Bootstrap:

Ajoutez nos plugins JavaScript, jQuery et Tether à la fin de vos pages, juste avant la balise de fermeture. Assurez-vous de placer jQuery et Tether en premier, car notre code en dépend.

Dans la balise <head>, vous chargez, dans l'ordre,

  1. (CDN) Twitter Bootstrap
  2. (Local) bootstrap.js (qui, je suppose, fait référence à Twitter Bootstrap),
  3. (CDN) jQuery 2.1.4

Au bas de la balise <body>, vous chargez, dans l’ordre,

  1. (CDN) jQuery 3.1.1
  2. JQuery (local) (uniquement si le CDN n'a pas répondu correctement)
  3. (CDN) Attache
  4. Titulaire (local)
  5. (Local) Twitter Bootstrap
  6. Solution de contournement d'un bogue dans la fenêtre IE10

Essentiellement, supprimez les lignes <script> dans <head>, en déplaçant l'instanciation du carrousel vers le bas. Votre code ressemblera à celui ci-dessous:

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>
    <div class="container">
        <div id="carouselExampleIndicators" class="carousel slide span12" data-ride="carousel">
            <div class="row">
                <ol class="carousel-indicators">
                    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li>
                    <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li>
                </ol>
            </div>
            <div class="row">
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active">
                        <img class="d-block img-fluid" src="sfeer-kok-groente-snijden_5.jpg" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="img/diamond.png" alt="Second slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block img-fluid" src="#" alt="Third slide">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script>
    window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/holder/2.9.4/holder.min.js"></script>
    <script>
    $(function() {
        Holder.addTheme("thumb", {
            background: "#55595c",
            foreground: "#eceeef",
            text: "Thumbnail"
        });
        $('#myCarousel').carousel({
            // Options
        });
    });
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>
4
Chris Forrence

Alors que je faisais carrousel dans Bootstrap 4, je faisais face au même problème. 

Je peux voir que vous avez mentionné <ol class ="carousel-indicators">

Voici la solution, en changeant simplement ol en ul, vous obtenez la sortie carrousel et le reste reste le même.

<ul class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators1" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators2" data-slide-to="2"></li> </ul>

Ce lien ci-dessous pourrait vous aider

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel

0
Edgy Affairs