如何将Owl Carousel的owl-nav放置在div容器外部？

Got it, moving the Owl Carousel navigation buttons outside the carousel container is a super common tweak—here are a couple of reliable, straightforward ways to make this happen:

方法1：提前定义自定义导航（推荐，更可控） #

This approach lets you place the navigation exactly where you want in your HTML, then hook it up to the carousel's functionality.

1. Set up your HTML structure
   Add your custom navigation elements outside the carousel container (in whatever parent/position you need):

   <div class="carousel-container">
     <!-- Custom navigation placed OUTSIDE the carousel -->
     <div class="custom-carousel-nav">
       <button class="carousel-prev">← Previous</button>
       <button class="carousel-next">Next →</button>
     </div>
   
     <!-- Owl Carousel wrapper -->
     <div class="owl-carousel">
       <div class="item">Slide 1 Content</div>
       <div class="item">Slide 2 Content</div>
       <div class="item">Slide 3 Content</div>
     </div>
   </div>
   

2. Initialize Owl Carousel with custom navigation
   Disable the default navigation, then bind click events to your custom buttons to trigger carousel actions:

   $('.owl-carousel').owlCarousel({
     loop: true,
     margin: 15,
     nav: false, // Turn off default navigation
     responsive: {
       0: { items: 1 },
       768: { items: 2 },
       1200: { items: 3 }
     }
   }).on('initialized.owl.carousel', function() {
     // Bind prev/next actions to custom buttons
     $('.carousel-prev').click(function() {
       $('.owl-carousel').trigger('prev.owl.carousel', [300]); // 300ms animation speed
     });
     $('.carousel-next').click(function() {
       $('.owl-carousel').trigger('next.owl.carousel', [300]);
     });
   });
   

方法2：移动默认生成的导航元素 #

If you prefer using the default .owl-nav elements that Owl creates automatically, you can reposition them after initialization:

1. Initialize the carousel with default navigation
   Keep nav: true to let Owl generate the navigation buttons:

   $('.owl-carousel').owlCarousel({
     loop: true,
     margin: 15,
     nav: true, // Keep default navigation enabled
     navText: ['←', '→'],
     responsive: {
       0: { items: 1 },
       768: { items: 2 },
       1200: { items: 3 }
     }
   });
   

2. Reposition the default nav after initialization
   Use the initialized.owl.carousel event to move the .owl-nav element to your target container after the carousel is ready:

   $('.owl-carousel').on('initialized.owl.carousel', function() {
     // Move the default nav to the container outside the carousel
     $('.owl-nav').appendTo('.carousel-container');
   });
   

Quick Style Tips #

Don't forget to style your navigation to fit your design—here's a basic example:

/* For custom navigation */
.custom-carousel-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
.carousel-prev, .carousel-next {
  padding: 8px 16px;
  border: none;
  background: #2c3e50;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

/* For repositioned default nav */
.owl-nav {
  display: flex;
  gap: 10px;
  margin-top: 15px;
}
.owl-prev, .owl-next {
  padding: 8px 12px !important;
  background: #2c3e50 !important;
  color: white !important;
  border-radius: 4px;
}

Important Notes #

• Always use the initialized.owl.carousel event when manipulating the carousel's DOM elements—this ensures the carousel is fully loaded before you make changes.
• If you're using method 2, double-check that your target container selector (.carousel-container in the example) matches your HTML structure.
• Adjust the animation speed (the 300 value in the trigger calls) to match your carousel's timing.

内容的提问来源于stack exchange，提问作者Sanoja Weerakon