Program to Create a Custom Navigation Carousel in jQuery

In this blog post, we will learn how to create a custom navigation carousel using jQuery. We will use the Owl Carousel plugin to create the carousel, and write jQuery code to handle the navigation functionality. This program will allow users to navigate through the carousel using custom next and previous buttons.

Code

<div class="custom-nav owl-nav">
<button class="btn" id="prevBtn"><i class="fa fa-chevron-left"></i></button>
<button class="btn" id="nextBtn"><i class="fa fa-chevron-right"></i></button>
</div>

<script>
jQuery(document).ready(function() {
    var owl = jQuery('.info-box-carousel');
    
    // Assuming that owl is initiated already. OR we initiate here below.
    // owl.owlCarousel();


    // Go to the next item
    jQuery('#nextBtn').click(function() {
        owl.trigger('next.owl.carousel');
    })
    // Go to the previous item
    jQuery('#prevBtn').click(function() {
        // With optional speed parameter
        // Parameters has to be in square bracket '[]'
        owl.trigger('prev.owl.carousel', [300]);
    })
})
</script>

Code Explanation

In the provided code snippet, we have a div element with the class name “custom-nav” which contains two buttons, one for going to the next item and another for going to the previous item in the carousel.

In our jQuery code, we begin by using the document.ready() function to ensure that the code executes only after the HTML document is fully loaded. We assign the selector '.info-box-carousel' to the variable “owl” which represents our carousel element.

The #nextBtn click event is triggered when the user clicks on the next button. Inside the click event function, we use the owl.trigger() function to trigger the ‘next.owl.carousel’ event, which moves the carousel to the next item.

Similarly, the #prevBtn click event is triggered when the user clicks on the previous button. Inside the click event function, we use the owl.trigger() function to trigger the ‘prev.owl.carousel’ event, which moves the carousel to the previous item. The optional second parameter [300] specifies the animation speed of the carousel in milliseconds.

To customize the navigation buttons, we have used Font Awesome icons within the buttons. The fa-chevron-left class represents the left arrow icon, while the fa-chevron-right class represents the right arrow icon.

Conclusion

In this blog post, we have learned how to create a custom navigation carousel using jQuery. By following the provided code snippet, you can implement a carousel with custom next and previous buttons in your HTML page. This program is useful for creating visually appealing and interactive carousels, which can enhance the user experience on your web pages.

Also checkout the following codes.

How to Check and Limit Maximum Input Number in JavaScript Program
Program to Use Firebase Messaging in JavaScript