Slider Dots

Create custom Slider Dots for a Slider

The fs-sliderdots attribute allows you to populate Webflow slider dots with custom content like images, text, or any HTML elements.

Overview

Slider Dots provides a way to enhance the native Webflow slider navigation by:

• Adding custom content (images, text, icons) to slider dots
• Automatically syncing with slider state
• Supporting custom styling with active states
• Working with CMS Slider and regular sliders

Basic Usage

Simple Slider Dots

Add custom content to slider navigation dots:

Basic Setup

<!-- Slider -->
<div class="slider" fs-sliderdots="slider">
  <!-- Slider content -->
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  
  <!-- Native Webflow Slider Nav -->
  <div class="slider-nav">
    <!-- Content template for dots -->
    <div fs-sliderdots="content">
      <span class="dot-number">1</span>
    </div>
  </div>
</div>

The content defined in fs-sliderdots="content" will be duplicated for each slide in your slider.

Attribute Reference

Element Attributes

Attribute	Value	Description
fs-sliderdots	slider	Defines the slider to instantiate
fs-sliderdots	content	Defines the content template for each dot
fs-sliderdots	slider-nav	Defines a custom container for slider navigation

Settings Attributes

Attribute	Values	Default	Description
fs-sliderdots-active	CSS class name	is-sliderdots-active	CSS class applied to active dot
fs-sliderdots-remove	true	-	Removes the original content after duplication

Custom Slider Nav

You can specify a custom location for the slider navigation:

<div class="slider" fs-sliderdots="slider">
  <!-- Slides -->
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  
  <!-- Native slider nav (hidden) -->
  <div class="slider-nav" style="display: none;">
    <div fs-sliderdots="content">
      <span>Dot</span>
    </div>
  </div>
</div>

<!-- Custom navigation location -->
<div fs-sliderdots="slider-nav" class="custom-nav-position">
  <!-- Dots will be generated here -->
</div>

Use fs-sliderdots="slider-nav" to place the navigation anywhere on your page, separate from the slider itself.

Examples

Numbered Dots

<div class="slider" fs-sliderdots="slider">
  <div class="slide">First Slide</div>
  <div class="slide">Second Slide</div>
  <div class="slide">Third Slide</div>
  
  <div class="slider-nav">
    <div fs-sliderdots="content" class="dot-wrapper">
      <div class="dot-number">01</div>
      <div class="dot-circle"></div>
    </div>
  </div>
</div>

Thumbnail Navigation

<div 
  class="slider" 
  fs-sliderdots="slider"
  fs-sliderdots-active="thumb-active"
>
  <div class="slide">
    <img src="product1-full.jpg" alt="Product 1">
  </div>
  <div class="slide">
    <img src="product2-full.jpg" alt="Product 2">
  </div>
  <div class="slide">
    <img src="product3-full.jpg" alt="Product 3">
  </div>
  
  <div class="slider-nav">
    <div fs-sliderdots="content" class="thumbnail-dot">
      <img src="thumbnail.jpg" class="thumb-image">
      <div class="thumb-overlay"></div>
    </div>
  </div>
</div>

Remove Original Content

Clear the navigation and only show custom dots:

<div class="slider" fs-sliderdots="slider">
  <div class="slide">Slide 1</div>
  <div class="slide">Slide 2</div>
  <div class="slide">Slide 3</div>
  
  <!-- Content will be cleared and replaced -->
  <div 
    class="slider-nav"
    fs-sliderdots-remove="true"
  >
    <div fs-sliderdots="content">
      <div class="custom-dot">
        <span class="dot-icon"></span>
        <span class="dot-text">Slide</span>
      </div>
    </div>
  </div>
</div>

When using fs-sliderdots-remove="true", the original content in the slider nav will be completely removed. Make sure your content template includes all necessary elements.

CMS Slider Integration

Slider Dots automatically waits for CMS Slider to finish loading:

<!-- Works seamlessly with CMS Slider -->
<div 
  class="slider" 
  fs-cmsslider-element="slider"
  fs-sliderdots="slider"
>
  <!-- CMS Collection List -->
  <div class="slide" fs-cmsslider-element="item">
    <div class="cms-content"></div>
  </div>
  
  <div class="slider-nav">
    <div fs-sliderdots="content">
      <div class="dot-indicator"></div>
    </div>
  </div>
</div>

Styling Active Dots

The active dot automatically receives the configured CSS class:

/* Default active class */
.is-sliderdots-active {
  background-color: #007bff;
  transform: scale(1.2);
  opacity: 1;
}

/* Custom active class */
.active-dot {
  border: 2px solid #007bff;
  box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

/* Inactive dots */
.dot-wrapper {
  opacity: 0.5;
  transition: all 0.3s ease;
}

JavaScript API

Access the Slider Dots API programmatically:

window.FinsweetAttributes ||= [];
window.FinsweetAttributes.push([
  'sliderdots',
  (sliderElements) => {
    // sliderElements contains all initialized slider elements
    console.log('Slider elements:', sliderElements);
    
    // Custom logic here
  },
]);

Best Practices

Keep Content Light

Use lightweight content in dot templates to avoid performance issues with many slides.

Style Active State

Always define clear visual feedback for the active dot to improve user experience.

Test with CMS

If using CMS, test with various numbers of items to ensure dots display correctly.

Consider Mobile

Ensure dot content is appropriately sized for mobile viewports.