Customizing Side Navigation Arrows in Owl Carousel 2

Introduction to Side Navigation in Owl Carousel 2

Owl Carousel 2 is a popular jQuery plugin for creating responsive carousels. A common requirement is to place navigation arrows on the left and right sides of the carousel for better accessibility and aesthetics. This article explains how to achieve this by combining JavaScript configuration and CSS positioning.

Step 1: Enabling and Customizing Navigation in JavaScript

First, ensure that navigation is enabled in the Owl Carousel configuration. Set the nav option to true. Additionally, use the navText option to define custom HTML for the navigation arrows. For example, to use Font Awesome icons:

$('#carousel').owlCarousel({
  nav: true,
  navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
  // other options...
});

This injects the navigation controls into the DOM with the specified HTML.

Step 2: Positioning the Navigation Arrows with CSS

To place the arrows on the sides, use CSS to position the .owl-prev and .owl-next elements. Here is a sample CSS code:

.owl-prev, .owl-next {
  width: 15px;
  height: 100px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block !important;
  border: 0px solid black;
}
.owl-prev { left: -20px; }
.owl-next { right: -20px; }
.owl-prev i, .owl-next i {
  transform: scale(2,5);
  color: #ccc;
}

This CSS uses absolute positioning to center the arrows vertically and place them outside the carousel on the left and right sides.

Step 3: Additional Tips and Optimizations

Based on community feedback, ensure that the carousel container has relative positioning to serve as a reference for the absolute positioning. Also, adjust the margins and sizes as needed for your design.

Complete Example

Combine the JavaScript and CSS for a working implementation. Here is a full code snippet:

<!-- HTML -->
<div id="carousel" class="owl-carousel">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

<script>
$(document).ready(function(){
  $('#carousel').owlCarousel({
    loop: true,
    margin: 10,
    nav: true,
    navText: ['<i class="fa fa-angle-left" aria-hidden="true"></i>', '<i class="fa fa-angle-right" aria-hidden="true"></i>'],
    items: 4
  });
});
</script>

<style>
.owl-prev, .owl-next {
  width: 15px;
  height: 100px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block !important;
  border: 0px solid black;
}
.owl-prev { left: -20px; }
.owl-next { right: -20px; }
.owl-prev i, .owl-next i {
  transform: scale(2,5);
  color: #ccc;
}
</style>

Conclusion

By following these steps, you can easily customize the navigation arrows in Owl Carousel 2 to appear on the sides. This enhances user interaction and visual appeal. Experiment with different icons and styles to match your project's design.