5568 sujets

Sémantique web et HTML

Bootstrap et carousel

Bonjour,

Je suis en train de tester le "carousel" de jquery et bootstrap.
Les images s'affichent mais pas du tout en slideshow.

Quels fichiers doivent être chargés ? En css et js ?

voici mon code 
<!DOCTYPE html>
<html lang="fr">
<head>
<title>st-gab</title>
<meta charset="utf-8">
<link href="styles/bootstrap4/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" type="text/css" href="styles/main_styles.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<div id="my-slider" class="carousel slide" data-ride="carousel">

				<div class="carousel-inner" role="listbox">
					<div class="item active">
						<img src="images/Lighthouse.jpg" alt="">
						<div class="carousel-caption">
							<h1>Phare</h1>
						</div>

					</div>
					<div class="item">
						<img src="images/Hydrangeas.jpg" alt="">
						<div class="carousel-caption">
							<h1>Hortensia</h1>
						</div>
	
					</div>
				</div>
			</div>

		</div>

	</div>

</div>

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>


</body>

</html>


Par avance merci.
Wilfried
Modérateur
Hello,
Tu as simplement besoin de l'initialiser avec Javascript, dans une balise <script> :
$('.carousel').carousel()
J'ai rajouté ce code
<script> 
$("#my-slider").carousel();

</script>


mais ca ne fonctionne pas.

Les images restent les une sur les autres
Modifié par Willstgab (15 Jan 2019 - 16:28)
Modérateur
Essaie ceci: il faut un "document ready" pour lancer quelque chose à l'aide de jQuery.
<script> 
$(function(){
  $("#my-slider").carousel();
})
</script>

Et regarde si tu n'as pas d'erreur dans ta console Smiley smile
Modifié par Yordi (15 Jan 2019 - 16:34)
Bonjour,

Je n'y arrive pas du tout. J'ai fait plein de recherches mais je n'y arrive pas. Le code me semble si simple pourtant. J'ai toujours 3 images empilées.

J'ai pris les derniers fichiers de bootstrap et jquery.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        body { 
          background-color:#DDD;
          padding-top: 10px;
        }
        [class*="col-"] { margin-bottom: 20px; }
        img { width: 100%; }
        .well {
          background-color:#CCC;
          padding: 20px;
        }
        a:active, a:focus { outline:none; }
        .inline-form input {
          display: inline-block;
          width: 100px;
        }
      </style>
    
</head>
<body>
    <section class="container">
    <div class="row">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
            <li data-target="#carousel" data-slide-to="0" class="active"></li>
            <li data-target="#carousel" data-slide-to="1"></li>
            <li data-target="#carousel" data-slide-to="2"></li>
            </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active"> <img alt="Tigre" src="images/Desert.jpg"></div>
            <div class="item"> <img alt="Tigre" src="images/Chrysanthemum.jpg"></div>
            <div class="item"> <img alt="Tigre" src="images/Koala.jpg"></div>
        </div>
        </div>
    </div>
    </section>


<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<script>
    $(function (){ 
      $('#carousel').carousel();
     
    })
</script> 
</body>
</html>


Merci pour votre aide
Wilfried
Modifié par Willstgab (16 Jan 2019 - 10:54)
Merci beaucoup. Vous aviez raison, j'aurai dû regarder mon code d'un peu plus prês.

Une autre question si je peux.

Comment réduire la taille du carousel. Sur écran large je dois scroller et je voudrai ne pas avoir à le faire.

J'ai joué sur les width et height mais ca coupe le carousel.

Merci encore.

Bonne journée.
Sujet clos
Aller à