slider Bootstrap i pętla foreach

Witam, chciałbym zrobić wyświetlanie kilku rekordów w sliderze, mam taki kod:

@foreach($ha as $h)
                                        <div class="item">
                                            <img src="https://i.ytimg.com/vi/_nnlyajoklI/hqdefault.jpg" alt="">
                                            <!-- Opis slajdu -->
                                            <div class="carousel-caption">
                                                <h3>{{ $h -> title }}</h3>
                                                <p>drugiego slajdu</p>
                                            </div>
                                        </div>
                                    @endforeach

wykorzystuje slider Bootstrapa, slider nie działa, slajdy nie zmieniają się, wydaje mi się że kod jest poprawny a mimo wszystko nie działa

Pokaż cały kod tego slidera.

<div id="carousel-example-generic2" class="carousel slide">
                                <!-- Wskaźniki w postaci kropek -->
                                <ol class="carousel-indicators">
                                    <li data-target="#carousel-example-generic2" data-slide-to="0" class="active"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="1"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="2"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="3"></li>
                                    <li data-target="#carousel-example-generic2" data-slide-to="4"></li>
                                </ol>

                                <!-- Slajdy -->
                                <div class="carousel-inner">
                                    <div class="item active">
                                        <img src="https://i.ytimg.com/vi/_nnlyajoklI/hqdefault.jpg" alt="">
                                        <!-- Opis slajdu -->
                                        <div class="carousel-caption">
                                            <h3>To jest opis</h3>
                                            <p>pierwszego slajdu</p>
                                        </div>
                                    </div>

                                    @foreach($v as $vv)
                                        <div class="item">
                                            <img src="{{ $vv -> photo }}" alt="">
                                            <!-- Opis slajdu -->
                                            <div class="carousel-caption">
                                                <h3>{{ $vv -> title }}</h3>
                                                <p>drugiego slajdu</p>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>

                                <!-- Strzałki do przewijania -->
                                <a class="left carousel-control" href="#carousel-example-generic2" data-slide="prev">
                                    <span class="icon-prev"></span>
                                </a>
                                <a class="right carousel-control" href="#carousel-example-generic2" data-slide="next">
                                    <span class="icon-next"></span>
                                </a>
                            </div>

Na pewno brakuje Ci obsługi carousel-indicators (będziesz miał zawsze 4 kropki nawet jak dasz X zdjęć).

Poza tym musisz sprawdzić czy do < img src= "XXX" > pakuje się odpowiedni adres do zdjęcia, bo jak zdjęcia brak to slider dostaje zerowej wysokości i znika.

Plus czy dołączasz do head te te rzeczy?

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>