How to Add Dots to a Carousel: WordPress, Bootstrap, CSS & JS

To add dots to a carousel, create one indicator button for each slide and connect every button to its corresponding slide.

A carousel can help you present multiple images, products, testimonials, portfolio items, or announcements without taking up too much page space. However, visitors may not realize that more slides are available when a carousel only includes an image and two small arrows.

Carousel dots solve this problem by showing the number of slides, identifying the active slide, and allowing visitors to jump directly to a specific item.

You can add carousel dots through your WordPress slider settings, Bootstrap carousel indicators, a JavaScript slider library, or custom HTML, CSS, and JavaScript. The correct method depends on how your carousel was created.

This guide explains how to add, style, and troubleshoot carousel dots across the most common platforms.

What Are Carousel Dots?

Carousel dots are small navigation controls that appear above, below, or over a carousel. Each dot represents a slide or group of slides.

The selected dot usually has a different color, size, border, or shape to show which slide is currently active.

Carousel dots are also called:

• Slider dots
• Navigation dots
• Pagination dots
• Carousel indicators
• Pagination bullets
• Slide indicators
• Slide picker controls

The W3C describes them as slide picker controls: a group of elements, often displayed as small dots, that allow users to choose a specific slide.

Why Add Dots to a Carousel?

Dots are not required for every carousel, but they can make navigation clearer and more predictable.

They reveal that more content is available

A visitor may assume that the first image is static when there is no visible navigation. Dots immediately indicate that the component contains multiple slides.

They show the visitor’s current position

An active dot helps visitors understand whether they are viewing the first, middle, or final slide.

They allow direct slide navigation

Without dots, a user may need to click the next arrow several times to reach a particular slide. Navigation dots let the user jump directly to it.

They improve mobile navigation

Dots provide a compact navigation method that works well on smaller screens, especially when arrow controls would cover part of the image.

They make carousel behavior easier to understand

Clear visual feedback helps users recognize that their click, swipe, or keyboard action changed the slide.

Carousel Dots vs. Arrows: Which Should You Use?

Dots and arrows serve different purposes.

Arrows move the carousel backward or forward one step at a time. Dots show the number of slides and allow direct navigation.

For a small carousel containing three to six slides, dots may be enough. For a product carousel, portfolio, testimonial slider, or gallery with several items, using both arrows and dots often creates a clearer experience.

Consider replacing dots with a numerical slide counter when the carousel contains many slides. Twenty or thirty tiny dots can become crowded, difficult to select, and confusing on mobile devices.

A counter such as 3 / 15 may work better for a large gallery.

How to Add Carousel Dots in WordPress

Many WordPress slider blocks, carousel widgets, and gallery plugins include built-in pagination controls. You usually do not need to write code.

The exact option name depends on the plugin or page builder.

Step 1: Open the page containing the carousel

From your WordPress dashboard, go to Pages or Posts and edit the content containing your slider.

Open it with the editor used to build the page, such as:

• Gutenberg
• Elementor
• Divi
• Bricks
• WPBakery
• A slider plugin interface

Step 2: Select the carousel

Click the carousel, image slider, testimonial slider, product slider, or gallery block.

The related settings should appear in the sidebar or widget panel.

Step 3: Find the navigation settings

Look for a section named:

• Navigation
• Pagination
• Controls
• Slider Settings
• Carousel Settings
• Arrows and Dots

Step 4: Enable the dots option

Turn on the option labeled:

• Show Dots
• Pagination
• Bullets
• Indicators
• Dot Navigation

Save or update the page after enabling it.

Step 5: Customize the dots

Depending on the plugin, you may be able to adjust:

• Dot color
• Active dot color
• Dot size
• Border
• Spacing
• Position
• Hover effect
• Mobile visibility

Step 6: Test the carousel

View the page on the front end and test every dot.

Check that:

• The number of dots matches the number of slides.
• Clicking each dot opens the correct slide.
• The active dot changes after clicking an arrow.
• The active dot changes after swiping.
• The dots are visible on both desktop and mobile.
• Keyboard users can reach and activate the controls.

What if your WordPress carousel has no dots option?

First, check whether the feature is available only in another navigation tab or premium version of the plugin.

You can also:

1. Add custom CSS if the dots exist but are hidden.
2. Use a shortcode parameter provided by the plugin.
3. Enable pagination through the plugin’s JavaScript settings.
4. Replace the carousel with one that supports dot navigation.
5. Build custom pagination using JavaScript.

Avoid editing a plugin’s core files. Plugin updates can overwrite those changes.

How to Add Dots to a Bootstrap 5 Carousel

Bootstrap calls carousel dots indicators.

Bootstrap 5 uses button elements and data-bs-* attributes for its carousel controls. This differs from older Bootstrap 4 examples that use list items, data-target, and data-slide-to.

Bootstrap recommends giving every carousel a unique ID and matching each indicator’s data-bs-target value to that ID. One slide must also have the .active class or the carousel will not be visible.

Make sure Bootstrap 5 CSS and the Bootstrap JavaScript bundle are loaded in your project. Then add the following markup:

<div
  id="projectCarousel"
  class="carousel slide"
  aria-label="Featured projects"
>
  <div class="carousel-indicators">
    <button
      type="button"
      data-bs-target="#projectCarousel"
      data-bs-slide-to="0"
      class="active"
      aria-current="true"
      aria-label="Show project 1"
    ></button>

    <button
      type="button"
      data-bs-target="#projectCarousel"
      data-bs-slide-to="1"
      aria-label="Show project 2"
    ></button>

    <button
      type="button"
      data-bs-target="#projectCarousel"
      data-bs-slide-to="2"
      aria-label="Show project 3"
    ></button>
  </div>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img
        src="project-1.jpg"
        class="d-block w-100"
        alt="Completed living room renovation"
      >
    </div>

    <div class="carousel-item">
      <img
        src="project-2.jpg"
        class="d-block w-100"
        alt="Modern office interior design"
      >
    </div>

    <div class="carousel-item">
      <img
        src="project-3.jpg"
        class="d-block w-100"
        alt="Outdoor restaurant seating area"
      >
    </div>
  </div>

  <button
    class="carousel-control-prev"
    type="button"
    data-bs-target="#projectCarousel"
    data-bs-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous slide</span>
  </button>

  <button
    class="carousel-control-next"
    type="button"
    data-bs-target="#projectCarousel"
    data-bs-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next slide</span>
  </button>
</div>

Bootstrap’s official carousel pattern also uses buttons for indicators and lets visitors jump directly to a selected slide.

How the Bootstrap carousel dots work

Each indicator contains a data-bs-slide-to value.

The values begin at zero:

• data-bs-slide-to="0" opens the first slide.
• data-bs-slide-to="1" opens the second slide.
• data-bs-slide-to="2" opens the third slide.

The first indicator includes:

class="active" aria-current="true"

This identifies the initially selected indicator.

The first .carousel-item must also contain the .active class.

How to add more Bootstrap carousel dots

For every new slide, add another indicator button.

For a fourth slide, add:

<button
  type="button"
  data-bs-target="#projectCarousel"
  data-bs-slide-to="3"
  aria-label="Show project 4"
></button>

Then add the corresponding fourth .carousel-item inside .carousel-inner.

The slide index and indicator index must match.

How to Customize Bootstrap Carousel Indicators

Bootstrap indicators are often displayed as short bars by default. You can turn them into circular dots with CSS.

#projectCarousel .carousel-indicators {
  gap: 8px;
  margin-bottom: 1rem;
}

#projectCarousel .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background-color: #ffffff;
  opacity: 0.55;
}

#projectCarousel .carousel-indicators .active {
  opacity: 1;
  transform: scale(1.2);
}

Scoping the styles with #projectCarousel prevents them from changing every Bootstrap carousel on the website.

Move Bootstrap dots below the carousel

Bootstrap positions indicators over the carousel by default. To place them below the images, use:

#projectCarousel {
  padding-bottom: 42px;
}

#projectCarousel .carousel-indicators {
  bottom: 0;
  margin-bottom: 8px;
}

#projectCarousel .carousel-indicators [data-bs-target] {
  background-color: #333333;
}

Add enough bottom padding so the dots do not overlap the slide content.

How to Build a Carousel with Dots Using HTML, CSS, and JavaScript

You can build your own carousel when you do not use Bootstrap, WordPress, or another slider library.

The following example:

• Creates one dot for each slide
• Uses real button elements
• Supports previous and next controls
• Updates the active dot
• Supports keyboard activation
• Works with multiple carousels on the same page
• Includes basic accessibility attributes
• Respects reduced-motion preferences

Step 1: Add the HTML

<section
  class="dot-carousel"
  data-carousel
  role="region"
  aria-roledescription="carousel"
  aria-label="Featured design projects"
>
  <div class="dot-carousel__viewport">
    <div class="dot-carousel__track" data-carousel-track>
      <article
        class="dot-carousel__slide"
        data-carousel-slide
        role="group"
        aria-roledescription="slide"
        aria-label="1 of 3"
      >
        <img src="design-1.jpg" alt="Minimal bedroom interior">
      </article>

      <article
        class="dot-carousel__slide"
        data-carousel-slide
        role="group"
        aria-roledescription="slide"
        aria-label="2 of 3"
      >
        <img src="design-2.jpg" alt="Bright contemporary kitchen">
      </article>

      <article
        class="dot-carousel__slide"
        data-carousel-slide
        role="group"
        aria-roledescription="slide"
        aria-label="3 of 3"
      >
        <img src="design-3.jpg" alt="Modern home office">
      </article>
    </div>
  </div>

  <div class="dot-carousel__controls">
    <button
      class="dot-carousel__arrow"
      type="button"
      data-carousel-prev
      aria-label="Show previous slide"
    >
      &#8592;
    </button>

    <div
      class="dot-carousel__dots"
      data-carousel-dots
      aria-label="Choose a slide"
    ></div>

    <button
      class="dot-carousel__arrow"
      type="button"
      data-carousel-next
      aria-label="Show next slide"
    >
      &#8594;
    </button>
  </div>
</section>

Replace the image file names and alternative text with your own content.

Step 2: Add the CSS

.dot-carousel {
  width: min(100%, 900px);
  margin-inline: auto;
}

.dot-carousel__viewport {
  overflow: hidden;
  border-radius: 12px;
}

.dot-carousel__track {
  display: flex;
  transition: transform 0.45s ease;
}

.dot-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.dot-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.dot-carousel__controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.dot-carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
}

.dot-carousel__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #333333;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.dot-carousel__dot:hover {
  background-color: #777777;
}

.dot-carousel__dot[aria-current="true"] {
  background-color: #333333;
  transform: scale(1.2);
}

.dot-carousel__dot:focus-visible,
.dot-carousel__arrow:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

.dot-carousel__arrow {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #cccccc;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .dot-carousel__track,
  .dot-carousel__dot {
    transition: none;
  }
}

The arrow buttons use a minimum target size of 44 by 44 pixels, making them easier to select on touchscreens.

Step 3: Add the JavaScript

document.querySelectorAll("[data-carousel]").forEach((carousel) => {
  const track = carousel.querySelector("[data-carousel-track]");
  const slides = Array.from(
    carousel.querySelectorAll("[data-carousel-slide]")
  );
  const dotsContainer = carousel.querySelector("[data-carousel-dots]");
  const previousButton = carousel.querySelector("[data-carousel-prev]");
  const nextButton = carousel.querySelector("[data-carousel-next]");

  if (
    !track ||
    !dotsContainer ||
    !previousButton ||
    !nextButton ||
    slides.length === 0
  ) {
    return;
  }

  let currentIndex = 0;

  const dots = slides.map((slide, index) => {
    const dot = document.createElement("button");

    dot.type = "button";
    dot.className = "dot-carousel__dot";
    dot.setAttribute("aria-label", `Show slide ${index + 1}`);

    dot.addEventListener("click", () => {
      showSlide(index);
    });

    dotsContainer.appendChild(dot);
    return dot;
  });

  function showSlide(index) {
    currentIndex = (index + slides.length) % slides.length;

    track.style.transform = `translateX(-${currentIndex * 100}%)`;

    slides.forEach((slide, slideIndex) => {
      const isActive = slideIndex === currentIndex;

      slide.setAttribute("aria-hidden", String(!isActive));
      slide.inert = !isActive;
    });

    dots.forEach((dot, dotIndex) => {
      const isActive = dotIndex === currentIndex;

      if (isActive) {
        dot.setAttribute("aria-current", "true");
      } else {
        dot.removeAttribute("aria-current");
      }
    });
  }

  previousButton.addEventListener("click", () => {
    showSlide(currentIndex - 1);
  });

  nextButton.addEventListener("click", () => {
    showSlide(currentIndex + 1);
  });

  carousel.addEventListener("keydown", (event) => {
    if (event.key === "ArrowLeft") {
      event.preventDefault();
      showSlide(currentIndex - 1);
    }

    if (event.key === "ArrowRight") {
      event.preventDefault();
      showSlide(currentIndex + 1);
    }
  });

  showSlide(0);
});

How does this JavaScript work

The script searches for every element containing the data-carousel attribute. This makes it possible to use more than one carousel on the same page.

It then:

1. Collects the slides.
2. Creates one button for each slide.
3. Adds the buttons to the dots container.
4. Moves the track with translateX().
5. Marks the selected dot with aria-current="true".
6. Hides inactive slides from assistive technology.
7. Responds to previous, next, and dot button clicks.
8. Supports left and right arrow keys.

How to Enable Swiper Pagination Bullets

Swiper calls its dot navigation pagination.

Add a pagination container to the Swiper markup:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>

  <div class="swiper-pagination"></div>
</div>

Then enable clickable pagination in the Swiper configuration:

const swiper = new Swiper(".swiper", {
  pagination: {
    el: ".swiper-pagination",
    clickable: true
  }
});

Swiper’s modular installation requires the Pagination module and its related styles when you are not using the full bundle.

How to Enable Slick Slider Dots

Slick Slider uses the dots setting.

$(".your-slider").slick({
  dots: true,
  arrows: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

The default setting is dots: false, so you must enable it explicitly. Slick also provides options such as appendDots, dotsClass, and customPaging for more control over dot placement and markup.

A common reason Slick dots do not appear is that the theme stylesheet has not been loaded. Make sure both the main Slick stylesheet and the theme styles are included when you depend on the default design.

How to Enable Owl Carousel Dots

Owl Carousel supports dot navigation through the dots option.

$(".owl-carousel").owlCarousel({
  items: 1,
  loop: true,
  dots: true,
  nav: true
});

Add the owl-theme class when you want to use Owl Carousel’s default dot and arrow styles:

<div class="owl-carousel owl-theme">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

Owl Carousel enables dots by default, but its theme stylesheet and owl-theme class are needed for the standard visual design.

How to Style Carousel Dots with CSS

The exact selector depends on the carousel platform, but the styling principles are similar.

Change the dot color

.carousel-dot {
  background-color: #b8b8b8;
}

Change the active dot color

.carousel-dot.active {
  background-color: #222222;
}

For an accessible custom carousel using aria-current, use:

.carousel-dot[aria-current="true"] {
  background-color: #222222;
}

Increase the dot size

.carousel-dot {
  width: 14px;
  height: 14px;
}

Keep enough space between dots so visitors do not accidentally select the wrong one.

Make carousel dots circular

.carousel-dot {
  border-radius: 50%;
}

The width and height should be equal to create a perfect circle.

Create a pill-shaped active dot

A wider active indicator can make the selected state easier to recognize.

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.carousel-dot[aria-current="true"] {
  width: 28px;
}

Add space between dots

The cleanest method is to use the gap property on the parent:

.carousel-dots {
  display: flex;
  gap: 10px;
}

Center the dots

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

Place the dots below the carousel

Keep the dots in a separate container after the slide viewport:

.carousel-dots {
  position: static;
  margin-top: 16px;
}

This often produces better readability than positioning them over a busy image.

Add visible focus styles

.carousel-dot:focus-visible {
  outline: 3px solid #111111;
  outline-offset: 3px;
}

Do not remove the browser’s focus outline unless you replace it with an equally visible alternative.

Hide carousel dots on desktop

@media (min-width: 1024px) {
  .carousel-dots {
    display: none;
  }
}

Only hide them when another clear navigation method, such as arrows or thumbnail controls, remains available.

How to Make Carousel Dots Responsive

Carousel dots should remain easy to see and select on mobile devices.

Use these practices:

Maintain enough space between controls

Very small dots placed close together are difficult to select accurately. Increase the clickable area with padding or use a larger button containing a smaller visual circle.

.carousel-dot {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
}

.carousel-dot::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background-color: #999999;
}

This creates a 32-pixel button while keeping the visible circle small.

Avoid wrapping several rows of dots

Multiple rows make the carousel position harder to understand.

For a large number of slides, consider:

• A slide counter
• Scrollable thumbnail navigation
• Previous and next arrows
• Dynamic pagination
• A progress bar
• Showing only nearby dots

Test the dots over different images

White dots may disappear over bright photographs, while dark dots may disappear over dark images.

Place them below the image or add a contrasting background behind the controls.

How to Make Carousel Dots Accessible

Carousel accessibility involves more than adding aria-label attributes.

The carousel must remain understandable and controllable for keyboard users, screen-reader users, touch users, and people who are sensitive to motion.

Use button elements

A dot performs an action, so it should usually be a <button>.

Avoid using an empty <span> as the clickable control. A native button already supports keyboard focus and activation.

The W3C recommends native button elements for carousel controls when possible.

Give every dot an accessible name

<button type="button" aria-label="Show slide 2"></button>

A screen reader should not announce an unexplained “button” for every indicator.

Identify the selected dot

<button
  type="button"
  aria-label="Show slide 1"
  aria-current="true"
></button>

Update aria-current whenever the active slide changes.

Do not identify the active state with color alone

The active dot can also be:

• Larger
• Outlined
• Pill-shaped
• Marked with an icon
• Given a stronger border

This helps visitors who cannot easily distinguish the selected color.

Provide visible keyboard focus

A keyboard user must be able to see which control is focused.

Label the carousel

<section
  role="region"
  aria-roledescription="carousel"
  aria-label="Customer success stories"
>

Use a label that describes the content rather than a generic label such as “slider.”

Label the slides

When descriptive slide titles are unavailable, labels such as 1 of 5, 2 of 5, and 3 of 5 can communicate position.

Handle autoplay carefully

Automatically rotating content can become confusing when visitors do not have enough time to read or interact with a slide.

According to the W3C carousel pattern, an automatically rotating carousel should provide a stop-and-start control. Rotation should stop when keyboard focus enters the carousel and while the pointer is hovering over it. It should not restart after keyboard focus enters unless the user explicitly requests it.

The simplest accessible option is often to disable autoplay.

Respect reduced-motion preferences

@media (prefers-reduced-motion: reduce) {
  .carousel-track {
    transition: none;
  }
}

This reduces unnecessary motion for visitors who have enabled reduced-motion settings on their devices.

Carousel Dots Not Working? Common Problems and Solutions

Carousel dots can fail because of incorrect settings, missing files, conflicting CSS, or mismatched slide indexes.

1. Carousel dots are not showing

Check whether pagination has been enabled in the slider settings.

Also verify that:

• The dots container exists.
• The carousel stylesheet is loaded.
• The slider theme stylesheet is loaded.
• The dots are not hidden with display: none.
• The dots are not positioned outside an overflow: hidden container.
• Their color is not identical to the background.
• The carousel initialized without JavaScript errors.

Use your browser’s developer tools to inspect the dots container.

If the elements exist but cannot be seen, the problem is probably CSS. If the elements do not exist, the carousel configuration or JavaScript initialization may be the cause.

2. The dots appear but are not clickable

Possible causes include:

• Another element is covering the dots.
• pointer-events: none is applied.
• Click event listeners were not added.
• The Bootstrap target ID is incorrect.
• The carousel library was not initialized.
• A JavaScript error stopped execution.
• The dots were added after the initialization process.

Inspect the dot with developer tools and check whether another element is positioned above it.

You can temporarily test layering with:

.carousel-dots {
  position: relative;
  z-index: 10;
}

Do not use an unnecessarily high z-index as a permanent fix without identifying the overlapping element.

3. Clicking a dot opens the wrong slide

Most carousel libraries use zero-based indexes.

That means:

• First slide: index 0
• Second slide: index 1
• Third slide: index 2

Make sure every dot uses the correct slide index.

Also check whether multiple carousels are using the same ID or global JavaScript selectors.

4. The active dot does not update

The active state must change after every navigation method, including:

• Dot clicks
• Previous and next arrow clicks
• Touch swipes
• Dragging
• Autoplay transitions
• Keyboard navigation
• API-controlled slide changes

When using a slider library, listen for its slide-change event rather than updating the dots only when they are clicked.

5. Bootstrap indicators do not work

Check that you are not mixing Bootstrap 4 and Bootstrap 5 syntax.

Bootstrap 5 uses:

data-bs-target
data-bs-slide
data-bs-slide-to

Older Bootstrap 4 examples use:

data-target
data-slide
data-slide-to

The indicator target must match the carousel ID exactly.

For example:

id="projectCarousel"

must be connected to:

data-bs-target="#projectCarousel"

6. The dots are not centered

Use flexbox on the parent container:

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

Remove conflicting left, right, float, or fixed-width styles when necessary.

7. The dots overlap the image or caption

Move the dots below the carousel or add bottom spacing.

.carousel {
  padding-bottom: 48px;
}

.carousel-dots {
  bottom: 8px;
}

Check the design on mobile because captions may become taller when text wraps.

8. The active dot color is not changing

Your custom CSS may be targeting the wrong active selector.

Common selectors include:

.active
[aria-current="true"]
.swiper-pagination-bullet-active
.slick-active
.owl-dot.active

Inspect the selected dot after changing slides to identify the exact class added by your carousel.

You may also need a more specific selector when your styles are being overridden.

9. Slick Slider dots are missing

Make sure:

• dots: true is enabled.
• Slick’s CSS is loaded.
• The theme CSS is loaded when using default styles.
• The slider contains enough items to move.
• The .slick-dots element is not hidden by your theme.

10. Swiper pagination is visible but not clickable

Swiper bullets are not necessarily clickable unless the option is enabled:

pagination: {
  el: ".swiper-pagination",
  clickable: true
}

Also make sure the Pagination module and related CSS have been imported in modular projects.

11. Owl Carousel dots have no styling

Add the theme class:

<div class="owl-carousel owl-theme">

Also load:

owl.theme.default.min.css

The dots may exist without the visual theme styles.

12. There are too many dots on mobile

Do not simply make every dot extremely small.

Instead, consider:

• Changing the dots to a fraction
• Showing a progress bar
• Using arrows
• Using thumbnails
• Grouping several items into one pagination step
• Displaying a limited set of dynamic dots

The navigation should remain understandable and easy to select.

Carousel Dot Design Best Practices

Good carousel pagination should help users without distracting them from the slide content.

Keep the design consistent

Use the same dot style across similar carousels on your website.

Create a clear active state

The active dot should be recognizable immediately. Use sufficient contrast and consider combining color with size or shape.

Avoid placing dots over important content

Dots should not cover faces, text, product details, calls to action, or comparison areas.

Use a large enough click area

The visible dot can be small, but the interactive button should be comfortable to select.

Keep slide order predictable

Clicking the third dot should always display the third slide or slide group.

Do not rely on autoplay

Visitors should be able to navigate manually and remain on a slide long enough to understand it.

Test with real content

A carousel that works with placeholder images may fail when captions have different lengths or images use different aspect ratios.

Test the final component with:

• Long captions
• Short captions
• Portrait images
• Landscape images
• Mobile screens
• Keyboard navigation
• Touch navigation
• Slow image loading

Conclusion

Adding dots to a carousel gives visitors a clearer way to understand and navigate your slider.

WordPress users can usually enable dots through a block, widget, or plugin setting. Bootstrap 5 users can add indicator buttons connected through data-bs-target and data-bs-slide-to. Developers building a custom carousel can generate accessible buttons with JavaScript and update the active state whenever the slide changes.

Regardless of the method you choose, make sure the dots are visible, clickable, responsive, and keyboard accessible. Use a strong active state, provide sufficient spacing, and avoid overwhelming mobile users with too many indicators.

A well-designed set of carousel dots does more than decorate a slider. It helps users discover additional content, understand their current position, and move directly to the slide that interests them.

Frequently Asked Questions

This page was last edited on 20 July 2026, at 5:34 pm