Owl Carousel 2: Create Custom Navigation Next and Previous Arrows

Leave a Comment / html / By

Owl Carousel 2: Create Custom Navigation Next and Previous Arrows

In this post we will give you Owl Carousel 2: Create Custom Navigation Next and Previous Arrows, hear for Owl Carousel 2: Create Custom Navigation Next and Previous Arrows we will give you details about it.

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: {
        : {
          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="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </div>
    <div class="item">
      <img src="" />
    </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 check out 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="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </div>
      <div class="item">
        <img src="" />
      </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: {
        : {
          items: 1
        },
        600: {
          items: 2
        },
        1000: {
          items: 3
        }
      }
    });
  </script>
</body>

</html>

Hope this code and post will helped you for implement Owl Carousel 2: Create Custom Navigation Next and Previous Arrows. if you need any help or any feedback give it in the comment section or you have a good idea about this post you can give it a comment section. Your comment will help us to help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs https://onlinecode.org

Leave a Comment

Your email address will not be published. Required fields are marked *

5  +  5  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US