Looping products (slider) Laravel

I'm trying to loop(8)products in a slider from the database using Flickity. I have imported CDNS, but It doesn't work, it displays all the products and the arrows are not working. How can I loop 8 products like this demo in a foreach loop?

Demo: https://codepen.io/desandro/pen/gbjzre

Controller

  $products = DB::table('recommends AS r')
 ->leftJoin('products AS p', 'r.product_id', '=', 'p.id')
 ->join('products_photos AS pp', 'pp.product_id', '=', 'p.id')
 ->select('p.id', 'p.name', 'image', 'p.price', 
 'info'))
 ->groupBy('p.id', 'p.name', 'image', 'p.price', 
 'info')
  ->take(8)
  ->get();

Blade template

  <div class="container gallery js-flickity">
  <div class="row">
  @forelse($products as $product)
  <div class="col-md-3 gallery-cell">
    <div class="card">
    <span>
    <a href="">
    @if(count($product))
       <img src="" class="card- 
  img" alt="">
       @else
       @endif
     </a>
     </span>
      <div  class="card-body">
      <span>
       <a href="">
         <p  href=" class="card- 
   text"></p>
         </a>
         <span>
        <div class="d-flex justify-content-between align-items- 
     center">
          <div class="btn-group">
            <h1> </h1>
          </div>

        </div>
      </div>
    </div>
    </div>
     @empty

     @endforelse
  </div>
  </div>
  </div>

CSS

 .gallery-cell:before {
  display: block;
  content: counter(gallery-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;

via Chebli Mohamed