How can I add numbered pagination to a slider in Webflow? Thank you.

To add numbered pagination to a slider in Webflow, you'll need to utilize custom code. Here's a step-by-step guide on how to achieve this:

​

Step 1: Set up your slider

In Webflow, create a slider component and add your desired slides. Customize the styling as per your requirements.

​

Step 2: Add pagination

Create a new element, such as a div or a custom HTML embed, just below the slider component. This element will hold the pagination buttons.

​

Step 3: Add custom code

Open the page settings and navigate to the custom code section. Add the following JavaScript code inside the `<head>` tag:

​

```html

<script>

    window.addEventListener('DOMContentLoaded', () => {

      let slider = document.querySelector('.slider-class'); // Replace "slider-class" with the class of your slider component

      let pagination = document.querySelector('.pagination-class'); // Replace "pagination-class" with the class of your pagination element

      slider.addEventListener('scroll', () => {

        // Calculate the current slide

        let slideWidth = slider.offsetWidth;

        let currentSlide = Math.round(slider.scrollLeft / slideWidth);

        // Remove active class from previous pagination button

        let previousActiveButton = pagination.querySelector('.active');

        if (previousActiveButton) {

          previousActiveButton.classList.remove('active');

        }

        // Add active class to current pagination button

        let currentButton = pagination.children[currentSlide];

        currentButton.classList.add('active');

      });

    });

</script>

```

​

Make sure to replace the placeholder class names (`slider-class` and `pagination-class`) with the actual class names of your slider and pagination elements.

​

Step 4: Style the pagination

In the Webflow Designer, navigate to your pagination element and add a class to it. Then, add the desired styling to the active and inactive pagination buttons using the class you just created.

​

You can also enhance the pagination by adding click event listeners to navigate to the respective slide whenever a pagination button is clicked. To achieve this, modify the JavaScript code inside the `DOMContentLoaded` event listener.

​

That's it! With these steps, you should be able to add numbered pagination to your Webflow slider using custom code.