Bootstrap 5 dropdown menu inside Owl Carousel

https://stackoverflow.com/a/71165181/6263942

by Gleb Kemarsky

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="py-5 mx-4">

  <h2>First Owl Carousel</h2>
  
  <div class="owl-carousel owl-theme">
    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 1</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#" role="button" id="dropdownMenu1" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-ellipsis-h"></i></a>
          <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenu1">
            <li><a class="dropdown-item" href="#">Link 1</a></li>
            <li><a class="dropdown-item" href="#">Link 2</a></li>
            <li><a class="dropdown-item" href="#">Link 3</a></li>
            <li><a class="dropdown-item" href="#">Link 4</a></li>
            <li><a class="dropdown-item" href="#">Link 5</a></li>
            <li><a class="dropdown-item" href="#">Link 6</a></li>
          </ul>
        </div>
      </div>
      <p class="px-3">
        Lorem ipsum dummy
      </p>    
    </div>

    <div class="item card">
      <div class="d-flex align-items-center p-3">
        <h5>Shilipp Sotocnik 2</h5>
        <div class="dropdown dropdown-lg d-inline-block ms-auto"> 
          <a href="#"...

JavaScript

$(function() {

  $('.owl-carousel')
    .each(function() {
      let carousel = $(this);
      carousel.on('show.bs.dropdown', '[data-bs-toggle=dropdown]', function() {
      	// universal solution
        let dropdown = bootstrap.Dropdown.getInstance(this);
        $(dropdown._menu).insertAfter(carousel);

				// alternative for this particular layout
        // $(this).next('.dropdown-menu').insertAfter(carousel);
      });
    })
    .owlCarousel({
      loop:true,
      margin:15,
      nav:true,
    });

});