Slider

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <style>
    .swiper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: transparent;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
    <div class="container">
      <div class="row">
        <div class="col-12">

<div class="swiper mySwiper mb-4 px-5">
            <div class="swiper-wrapper mb-5">
              <div class="swiper-slide">
                <div class="card">
                  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="card">
                  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="card">
                  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="card">
                  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="card">
                  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="card">
                  <img src="https://static.remove.bg/sample-gallery/graphics/bird-thumbnail.jpg" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
          </div>

</div>
      </div>
    </div>
  
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  
  <script>
    var swiper = new Swiper(".mySwiper", {
      loop: true,
      speed: 1000,
      autoplay: {
        delay: 2000,
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      breakpoints: {
        480: {
          slidesPerView: 1,
        },
        1024: {
          slidesPerView: 4,
          spaceBetween: 20,
        },
      },
    });
  </script>

-------------------------------------------------------------------
          
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<section>
      <div class="container pt-5">
        <div class="row">
            <div class="col-lg-12">
                <div class="owl-carousel owl-theme mb-5">
                    @foreach($courses as $course)
                    <div class="item">
                        <a href="" style="text-decoration:none; color:#007a80;">
                            <div class="card p-2">
                              <style>
                                  .card:hover{
                                      box-shadow: 0px 0px 2px #009DA6;
                                      background-color: #B2E5E8;
                                      color: black;
                                      transition: .5s;
                                  }
                              </style>
                              <img src="{{ asset('images/course/'.$course->logo) }}" style="width:100%;height:150px;">
                              <div class="card-body">
                                <p class="text-uppercase fw-bold">{{$course->title}}</p>
                                <span class="d-block">Price : {{$course->price}}</span>
                                <span class="d-block text-end py-2">with - <b>{{$course->user->name}}</b></span>
                                <form action="{{route('carts.store')}}" method="post">
                                    @csrf
                                    <input type="hidden" name="course_id" value="{{$course->id}}">
                                    <button type="submit" class="btn btn-primary" name="button">Enroll Now</button>
                                </form>
                              </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
      </div>
    </section>
          
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
            $('.owl-carousel').owlCarousel({
            loop:false,
            margin:10,
            autoplay:true,
            autoplayTimeout:5000,
            stagePadding:50,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:4
                }
            }
        })
    </script>