<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>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter