0
votes

Le carrousel dynamique de Laravel ne fonctionne qu'une seule image

J'essaie de créer un carrousel dynamique à Laravel, mais je ne vois qu'une seule image. J'ai la recherche de solutions de nombreuses heures mais je suis toujours bloqué

J'ai essayé de changer mon code de cette solution Carrousel dynamique dans PHP Laravel montre une image mais n'a pas fonctionné

Accueil.Blade.php code xxx

maître.blade.php code xxx

toute aide sera appréciée.

php laravel bootstrap-4 carousel

0 commentaires

3 Réponses :

8
votes

Le problème pourquoi il ne fonctionne pas, c'est parce que la boucle

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    </ol>
    <div class="carousel-inner">
        @foreach($sliders as $key => $slider)
        <div class="carousel-item {{$key == 0 ? 'active' : '' }}">
            <img src="{{url('images', $slider->image)}}" class="d-block w-100"  alt="..."> 
        </div>
        @endforeach
    </div>
    <a class="carousel-control-prev" href="#myCarousel" 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" 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

0
votes

Dans la section code>,

jQuery Script doit être écrit en premier, à la queue de bootstrap. Si le code a raison et affichant une seule image plus tôt, cela devrait fonctionner maintenant. P>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

0 commentaires

1
votes

<div class="carousel-item {{$loop->iteration == 1 ? 'active' : ''}}">

2 commentaires

Juste pour le plaisir, supposons que je pense que ce morceau de code ne fonctionne pas et ne manque pas de résoudre le problème. S'il vous plaît convaincre autrement moi en ajoutant une explication comment cela fonctionne et pourquoi cela aide.

Élaborer, s'il vous plaît essayez de vous expliquer pourquoi ce code fonctionnerait et comment il corrige le problème