Create Custom Navigation Next and Previous Arrows

Last updated on: September 16, 2023 by Digamber

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 !important;
}
.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:

Owl Carousel 2 Custom Arrows

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 !important;
    }
    .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

A Full-stack developer with a passion to solve real world problems through functional programming.

Setting Up Owl Carousel 2

Preparing Carousel HTML Structure

Style Prev Next Arrows

Recommended Posts