调整Owl Carousel导航按钮：替换为箭头并置于轮播图两侧

Let's walk through how to swap the default nav buttons with styled arrows positioned on the left and right of your carousel:

Step 1: Update Your JavaScript Configuration #

First, enable navigation and set custom arrow content in your Owl Carousel init code. I'll include options for both Font Awesome icons (common for styled arrows) and Unicode arrows (no external library needed):

<script>
$(document).ready(function() {
  $('.owl-carousel').owlCarousel({
    autoplay: true,
    autoplayTimeout: 3000,
    smartSpeed: 900,
    autoplayHoverPause: false,
    loop: true,
    margin: 30,
    nav: true, // Turn on navigation (was false before)
    navText: [
      // Option 1: Use Font Awesome arrows (requires Font Awesome CSS)
      "<i class='fa fa-angle-left'></i>",
      "<i class='fa fa-angle-right'></i>",
      
      // Option 2: Use Unicode arrows (no external library)
      // "<span>&#8249;</span>",
      // "<span>&#8250;</span>"
    ],
    dotsEach: true,
    touchDrag: true,
    // Add any remaining options you had here...
  });
});
</script>

Note: If you choose Font Awesome, make sure you've added its CSS to your project (via CDN or local file).

Step 2: Style the Arrows with CSS #

Add this CSS to position the arrows on the sides and match your reference design:

/* Make sure the carousel container is relative (so arrows position correctly) */
.owl-carousel {
  position: relative;
}

/* Style the nav buttons */
.owl-prev, .owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* Center vertically */
  background: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent background */
  width: 45px;
  height: 45px;
  border-radius: 50% !important; /* Circular shape */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important;
  font-size: 24px;
  transition: background 0.3s ease;
}

/* Position left arrow */
.owl-prev {
  left: 25px; /* Adjust distance from left edge */
}

/* Position right arrow */
.owl-next {
  right: 25px; /* Adjust distance from right edge */
}

/* Hover effect for buttons */
.owl-prev:hover, .owl-next:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

Quick Adjustments You Can Make: #

• Tweak left/right values to move arrows closer/farther from the edges
• Change width/height to make buttons bigger/smaller
• Modify the background color to match your site's palette
• Adjust font-size to make arrows larger/smaller

This setup will give you the side-aligned, arrow-style navigation buttons you're looking for, matching the reference design you provided.

内容的提问来源于stack exchange，提问作者Bobo R.