Simulating a Scrollbar in Owl Carousel

I like using Owl Carousel. In custom web apps, developing custom WordPress themes or plugins, I have a lot of experience and have used it on many occasions. I also love their documentation and have gone through many variations of the carousel -except this one.

I'm currently working on a custom CMS website with API connections to an external database to fetch current information. It's quite a project, and the designer sent me templates showing how certain elements should look. There's a carousel with a scrollbar below.

Of course, I used Owl Carousel, linked the files, entered the data, and everything worked—except Owl Carousel doesn't have a scrollbar feature. I Googled, used Stack Overflow, even tried ChatGPT, but nothing actually worked. Today, I decided to find a solution the old-fashioned way: break it down, go step by step, and start over whenever a solution doesn’t work.

This is the solution that works. I'm also providing an example for download. It's just a basic Owl Carousel example with a couple of my modifications.

1. Owl Carousel HTML

This is a basic Owl Carousel HTML structure (based on the basic demo):

<div class="owl-carousel owl-theme">
  <div class="item"><h4>1</h4></div>
  <div class="item"><h4>2</h4></div>
  <div class="item"><h4>3</h4></div>
  <div class="item"><h4>4</h4></div>
  <div class="item"><h4>5</h4></div>
  <div class="item"><h4>6</h4></div>
  <div class="item"><h4>7</h4></div>
  <div class="item"><h4>8</h4></div>
  <div class="item"><h4>9</h4></div>
  <div class="item"><h4>10</h4></div>
  <div class="item"><h4>11</h4></div>
  <div class="item"><h4>12</h4></div>
</div>

2. Initialize Owl Carousel

Use jQuery to initialize:

<script>
$(document).ready(function() {
  var owl = $('.owl-carousel');
  owl.owlCarousel({
    margin: 10,
    nav: false,
    loop: true,
    responsive: {
      0: { items: 1 },
      600: { items: 3 },
      1000: { items: 5 }
    }
  });
});
</script>

Don't forget to include the Owl Carousel CSS and JS files, as well as the jQuery library.

3. Simulating a Scrollbar with Dots

We can style the dots to look like a scrollbar with CSS (already included in <style> above).

4. JavaScript for Scrollbar Functionality

setTimeout(function(){
  $(".owl-carousel .owl-dots button").css('width', 100 / $(".owl-carousel .owl-dots button").length + "%");
}, 100);

var owl_is_clicked;
var poc_x = 0, poc_y = 0;

$(document).on('mousedown', '.owl-carousel button.owl-dot.active, .owl-carousel button.owl-dot.active span', function(e) {
  owl_is_clicked = true;
  poc_x = e.pageX;
  poc_y = e.pageY;
}).on('mouseup', function(e) {
  if(owl_is_clicked) {
    var d = Math.sqrt(Math.pow(e.pageX - poc_x, 2) + Math.pow(e.pageY - poc_y, 2));
    if (d > 5) {
      if($(e.target).hasClass('owl-dot')) $(e.target).find('span').trigger('click');
      else if($(e.target).parent().hasClass('owl-dot')) $(e.target).parent().trigger('click');
      else {
        $(".owl-dots button.owl-dot").each(function(){
          if(e.pageX > $(this).offset().left && e.pageX < $(this).offset().left + $(this).width()){
            $(this).trigger('click');
            return false;
          }
        });
      }
      owl_is_clicked = false;
    }
  }
});

5. How It Works

First, this code sets the dots to be evenly wide. We wait a little for the carousel to initialize (100ms in this case). The logic is simple: set the width of each button to 100% divided by the number of dots. For example, if there are 3 dots, each button will be 33.3333% wide; if there are 20 dots, each button will be 5% wide.

Next, we detect clicks on the scrollbar handle and �activate� the scrollbar functionality. We detect the mousedown event, and if it happens over the handle (active button), we save the click coordinates and set the owl_is_clicked flag. Note: sometimes it doesn�t fire if clicked on the span element inside the button.

After mousedown, we check the mouseup event. First, we check if owl_is_clicked is true. Then we calculate the distance between mousedown and mouseup to detect dragging. If the distance is greater than 5px, we determine if the handle was dragged over another dot and trigger a click accordingly.

Hope this helps! It�s not a perfect scrollbar, but it�s functional. If you find it helpful, please share. Thanks!

You can download the owl carousel with horizontal scrollbar example by clicking here.