Signaler

Carousel ne fonctionne pas [Résolu]

Posez votre question helloworld95 - Dernière réponse le 7 sept. 2017 à 10:24 par helloworld95
Bonjour,

J'ai ajouté un caroussel sur mon site avec le framework bootstrap 4 mais il ne fonctionne pas. Je n'arrive pas a passer d'une image à l'autre, il reste statique.

Merci


    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" 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">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

		<link rel="stylesheet" type="text/css" href="views/css/styles.css">
	</head>





    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="first-slide" src="http://chezalfred.info/wp-content/uploads/2016/06/programmation-informatique.png" alt="First slide">
          <div class="container">
            <div class="carousel-caption d-none d-md-block text-left">
              <h1>TEST</h1>
              <p>TEST TEST TEST</p>
              <p><a class="btn btn-lg btn-primary" href="#" rel="nofollow noopener noreferrer" target="_blank" role="button">Enregistrez vous</a></p>
            </div>
          </div>
        </div>  
        <div class="carousel-item">
          <img class="second-slide" src="http://static.hitek.fr/img/actualite/matrice.jpg" alt="Second slide">
          <div class="container">
            <div class="carousel-caption d-none d-md-block">
              <h1>TEST 2</h1>
              <p>Page test 2</p>
              <p><a class="btn btn-lg btn-primary" href="#" rel="nofollow noopener noreferrer" target="_blank" role="button">TEST 2</a></p>
            </div>
          </div>
        </div>
      <a class="carousel-control-prev" href="#myCarousel" rel="nofollow noopener noreferrer" target="_blank" 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" rel="nofollow noopener noreferrer" target="_blank" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>




Utile
+0
plus moins
Salut,

As tu des erreurs dans la console de développement de ton navigateur ?

N'aurais-tu pas oublier d'inclure le script jQuery ?

Bonne journée,
helloworld95- 7 sept. 2017 à 10:10
Bonjour, je n'ai aucune erreur.

J'ai tenté de rajouter cette ligne de code, mais cela ne fonctionne toujours pas.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Répondre
Pitet 2292Messages postés lundi 11 février 2013Date d'inscription 12 septembre 2017 Dernière intervention - 7 sept. 2017 à 10:16
As tu des erreurs dans la console de développement de ton navigateur ?

Au passage Bootstrap est passé en beta, tu ne devrais plus utiliser la version alpha.
Essaye avec les cdn proposés sur cette page : https://getbootstrap.com/docs/4.0/getting-started/introduction/
Répondre
helloworld95- 7 sept. 2017 à 10:24
Effectivement il y avait des erreurs et je l'ai ai corrigé. Je devais charger le jquery avant le bootstrap.min.js.

Merci !
Répondre
Donnez votre avis

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !