Create Custom Navigation Next and Previous Arrows

Owl Carousel 2 is a quintessential HTML, CSS, and JavaScript-based slider, which is majorly used for displaying images and content. This jQuery slider has covered almost every modern web and mobile application development fundamentals.

For instance, Customization, Touch, Drag Support, Fully Responsive, Supports Modern Browsers, and many more. It even supports the old zombie browsers with CSS2 fallback support.

Isn’t it great that it has everything under one roof, nevertheless? In this article, we will shed light on its navigation arrows. By default, it comes with the next and previous buttons. Still, after tweaking a little bit, we can add navigation arrows to the Owl Carousel 2.

From UX (user experience), perspective carousel, or image/content sliders are essential. It is believed that the human eye reacts to the movement, and the human brain thinks it is missing something significant.

Owl Carousel 2 has been built on considering all those UX factors. Yes, it is prevalent among web developers due to its tons of features. Let’s get started transforming the next and previous buttons to navigation arrows using HTML, CSS, and jQuery.

Setting Up Owl Carousel 2

Setting Up Owl Carousel 2 is easy; first place the jQuery, right after that, call the owl carousel JavaScript link. To provide the aesthetics also add the carousel CSS links.

We are using the CDN links however you can download the owl carousel and call the scripts and CSS locally.

Add the CSS paths in Head area:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

Place the scripts before the body closing tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

To initialize the owl carousel 2 you have to invoke the following function:

  <script>
    $('.owl-carousel').owlCarousel({
      margin: 15,
      nav: true,
      navText: ["<div class='nav-button owl-prev'>‹</div>", "<div class='nav-button owl-next'>›</div>"],
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 2
        },
        1000: {
          items: 3
        }
      }
    });
  </script>

The navText property is adding the custom class to the previous and next navigation buttons. We placed the arrows previous and next code however you can go for the image and other icons.

Preparing Carousel HTML Structure

Now we have to create the carousel structure using HTML and some random dummy images.

<div class="carousel-wrapper">
  <div class="owl-carousel owl-theme">
    <div class="item">
      <img src="https://via.placeholder.com/600/92c952" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/771796" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/24f355" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/d32776" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/f66b97" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/56a8c2" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/b0f7cc" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/54176f" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/51aa97" />
    </div>
    <div class="item">
      <img src="https://via.placeholder.com/600/810b14" />
    </div>
  </div>
</div>

Style Prev Next Arrows

In this final step, we have to add the CSS to create the custom next and previous arrows button.

.carousel-wrapper {
  width: 1000px;
  margin: auto;
  position: relative;
  text-align: center;
  font-family: sans-serif;
}

.owl-carousel .owl-nav {
  overflow: hidden;
  height: 0px;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #5110e9;
}


.owl-carousel .item {
  text-align: center;
}

.owl-carousel .nav-button {
  height: 50px;
  width: 25px;
  cursor: pointer;
  position: absolute;
  top: 110px ;
}

.owl-carousel .owl-prev.disabled,
.owl-carousel .owl-next.disabled {
  pointer-events: none;
  opacity: 0.25;
}

.owl-carousel .owl-prev {
  left: -35px;
}

.owl-carousel .owl-next {
  right: -35px;
}

.owl-theme .owl-nav [class*=owl-] {
  color: #ffffff;
  font-size: 39px;
  background: #000000;
  border-radius: 3px;
}

.owl-carousel .prev-carousel:hover {
  background-position: 0px -53px;
}

.owl-carousel .next-carousel:hover {
  background-position: -24px -53px;
}

Here is the final output that you will see in the browser:

You can checkout the final code of this tutorial:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Owl Carousel 2 Custom Navigation Arrows Example</title>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

  <style>
    .carousel-wrapper {
      width: 1200px;
      margin: auto;
      position: relative;
      text-align: center;
      font-family: sans-serif;
    }

    .owl-carousel .owl-nav {
      overflow: hidden;
      height: 0px;
    }

    .owl-theme .owl-dots .owl-dot.active span,
    .owl-theme .owl-dots .owl-dot:hover span {
      background: #5110e9;
    }


    .owl-carousel .item {
      text-align: center;
    }

    .owl-carousel .nav-button {
      height: 50px;
      width: 25px;
      cursor: pointer;
      position: absolute;
      top: 110px ;
    }

    .owl-carousel .owl-prev.disabled,
    .owl-carousel .owl-next.disabled {
      pointer-events: none;
      opacity: 0.25;
    }

    .owl-carousel .owl-prev {
      left: -35px;
    }

    .owl-carousel .owl-next {
      right: -35px;
    }

    .owl-theme .owl-nav [class*=owl-] {
      color: #ffffff;
      font-size: 39px;
      background: #000000;
      border-radius: 3px;
    }

    .owl-carousel .prev-carousel:hover {
      background-position: 0px -53px;
    }

    .owl-carousel .next-carousel:hover {
      background-position: -24px -53px;
    }
  </style>
</head>

<body>

  <div class="carousel-wrapper">

    <h2>Owl Carousel 2 Custom Navigation Arrows Example</h2>

    <div class="owl-carousel owl-theme">
      <div class="item">
        <img src="https://via.placeholder.com/600/92c952" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/771796" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/24f355" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/d32776" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/f66b97" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/56a8c2" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/b0f7cc" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/54176f" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/51aa97" />
      </div>
      <div class="item">
        <img src="https://via.placeholder.com/600/810b14" />
      </div>
    </div>
  </div>



  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

  <script>
    $('.owl-carousel').owlCarousel({
      margin: 15,
      nav: true,
      navText: ["<div class='nav-button owl-prev'>‹</div>", "<div class='nav-button owl-next'>›</div>"],
      responsive: {
        0: {
          items: 1
        },
        600: {
          items: 2
        },
        1000: {
          items: 3
        }
      }
    });
  </script>
</body>

</html>
Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago