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

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

 

Leave a Reply

avatar
  Subscribe  
Notify of