0
votes

mon carrousel de bootstrap 4 n'affiche pas les images

La navigation fonctionne, mais le carrousel me fait me sentir comme briser mon ordinateur portable.

Le carrousel ne montre que des images ne montre que trois points de glissement de trois points à l'aide de bootstrap 4.1.2 P>

<!doctype html>
<html lang="en">
<head>``

<meta charset="utf-8">
<meta name="viewport" content="width=device-width",initial-scale="1">
<title>master c&f</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"> </script>

</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!---Navigation--->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" >
	<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
	<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nabar-nav ml-auto">
	<li class="nav-item active">
		<a class="nav-link" href="#">Home</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">clearing</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">forwading</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">warehousing</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">enquires</a>
	</li>
</ul>
</div>

</div>
</nav> 

<!----Image slider---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/back.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="img/FRONT.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="img/BOAT.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
	








	</body>
	</html>

javascript html bootstrap-4 twitter-bootstrap

2 commentaires

Pouvez-vous s'il vous plaît poster un exemple de travail? Votre code actuel ne fonctionne pas.

Pourriez-vous nous en dire plus sur votre structure de fichiers? Votre fichier HTML au même endroit que votre répertoire IMG?

3 Réponses :

0
votes

La seule chose que je peux voir ici, cela entraînera des problèmes de chargement des images. Je veux dire l'emplacement des images. Si le chemin 'img' est situé dans un autre chemin comme public / img / nom.jpg, vous devez taper la route complète. Une autre raison est que si vous utilisez Php frMe Travail, vous devez utiliser quelque chose comme base_url () ou site_url () avant le chemin. La plupart du temps, les options qui spécifient les chemins sont dans un fichier de configuration, qui hache la route complète vers le projet contenant du projet.

0 commentaires

0
votes

Je suppose que le problème principal ici est dû à votre chemin d'accès. En utilisant une image trouvée dans Google et en modifiant simplement la SRC des images du carrousel dans votre extrait, cela fonctionne bien.

Les 3 points que vous voyez dans votre code sont dus au alt = "..." code> attribut. Si vous écrivez quelque chose ici (comme vous le souhaitez), vous verrez ce texte si l'image n'est pas trouvée. P>

p>



<!doctype html>
<html lang="en">
<head>``

<meta charset="utf-8">
<meta name="viewport" content="width=device-width",initial-scale="1">
<title>master c&f</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link href="bootstrap.css" rel="stylesheet">
<script src="bootstrap.js"> </script>

</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!---Navigation--->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top" >
	<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
	<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="nabar-nav ml-auto">
	<li class="nav-item active">
		<a class="nav-link" href="#">Home</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">clearing</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">forwading</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">warehousing</a>
	</li>
	<li class="nav-item ">
		<a class="nav-link" href="#">enquires</a>
	</li>
</ul>
</div>

</div>
</nav> 

<!----Image slider---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://staticr1.blastingcdn.com/media/photogallery/2018/6/24/660x290/b_1200x675/ciao-compie-200-anni-il-celebre-saluto-inizio-a-diventare-comune-dal-1818-vitaesteticait_2039115.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="2018/02/13/172803766-5059c7e1-5f17-49f3-b9ee-128dee78981a.jpg" class="d-block w-100" alt="Image not found...">
    </div>
    <div class="carousel-item">
      <img src="https://st3.depositphotos.com/5269571/12517/v/950/depositphotos_125175688-stock-illustration-ciao-italian-greeting.jpg" class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
	








	</body>
	</html>

0 commentaires

0
votes

Votre carrousel va bien. Assurez-vous simplement que les chemins vers les images sont corrects. Quelle est la structure de votre répertoire?

ci-dessous j'ai utilisé des images publiques: p>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<!----Image slider---->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="img-fluid" src="https://picsum.photos/1200/600/?random">
    </div>
    <div class="carousel-item">
      <img class="img-fluid" src="https://picsum.photos/1200/600/?gravity=north">
    </div>
    <div class="carousel-item">
      <img class="img-fluid" src="https://picsum.photos/1200/600/?gravity=west">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

0 commentaires