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.