Как правильно отобразить слайдер в bootstrap?

На странице показываются купленные продукты, но если их становится много - становится громоздко, я попробовал вместо обычных блоков показывать продукты с помощью слайдера с bootstrap и внедрил код в оригинальную разметку этого слайдера, однако все поломалось и криво отображается.

Вот как это было изначально:

@foreach($purchased_products as $product)
    <div class="col-sm-4 col-lg-4 col-md-4">

        <div class="thumbnail thumbnail-active">
            <img src="http://placehold.it/320x180" alt="">
            <div class="caption">
                <h4><a href="{{ route('products.show', [$product->slug]) }}">{{ $product->title }}</a>
                </h4>
                <p>{{ $product->description }}</p>
            </div>
        </div>
    </div>
@endforeach

Вот как я попытался это внедрить в слайдер:

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel col-sm-9 col-lg-9 col-md-9">
      <ol class="carousel-indicators">
        @foreach($purchased_products as $product)
            <li data-target="#carouselExampleCaptions" data-slide-to="0"></li>
        @endforeach
      </ol>
      <div class="carousel-inner">
        @foreach($purchased_products as $product)
             <div class="carousel-item ">
              <img src="http://placehold.it/960x540" class="d-block w-100" alt="...">
              <div class="carousel-caption d-none d-md-block">
                <h5><a href="{{ route('products.show', [$product->slug]) }}">{{ $product->title }}</a></h5>
                <p>{{ $product->description }}</p>
              </div>
            </div>
        @endforeach
      </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>