Owl Carousel 2 – Customize Navigation Next Prev Arrows

Owl Carousel 2 is a very popular and easy to implement Image and HTML slider. This is the most loved and favorable image slider available. Most developers prefer to use this slider due to many reasons like responsiveness, touch device support and also support older browsers. It is a full package of many useful options to customize it.

Here we will discuss navigation arrows, next prev buttons available by default looks a bit simple and centralized in between, so adding some custom CSS we will align them on both corners of the slider.

So let’s get started

Also, See:
Slick Carousel in Angular 6/7
Swiper Carousel in Angular 6/7
Owl Carousel 2 in Angular 6/7

To use Owl Carousel 2 first add libraries, jQuery is required as a dependency.

Add CSS files 

these CSS files having predefined and some basic styling slider to work.

JavaScript function

Here we added a selector .owl-carousel class to call owlCarousel function, in this function we defined some options navText is having custom HTML for Next and Prev buttons on which we are going to work. You can find more options in docs.

Carousel Slides HTML

Here we have used faker.js to load random images, each item specifies a slide in the carousel

Customize Next Previous Buttons

Add following CSS styles to customize Next and Previous buttons to show on Left and Right side of Slider.

We have used PNG images with arrows to customize Next Prev buttons.

After implementation final carousel will look like this, see the working demo here


Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

Notify of