Standard navigation dots are great for short sliders, but if you have a portfolio with 15 images or a step-by-step tutorial, 15 tiny dots look messy and uninformative. A slide counter (like “1 / 15”) gives users precise context about where they are in the sequence and how much is left.
To solve this, use Div Render Container Slider for Elementor.
Step 1: Change Pagination Type
In the Slider Settings, find the Pagination section. By default, this is usually set to “Bullets” (dots). Click the dropdown and select Fraction.
Step 2: Styling the Counter
The default output might be small. Go to the Style tab and find the Pagination settings.
- Typography: Increase the font size to make the numbers a distinct design element. A bold, large font often looks modern and architectural.
- Color: Ensure high contrast against the background so it’s easily readable.
Step 3: Position the Counter
Fraction pagination often looks best tucked away rather than centered. Use the horizontal alignment controls in the Style tab to push the counter to the bottom-right corner of the slider, or position it absolutely if the plugin allows advanced positioning.
Pro Tips for Slide Counters
- Combine with Progress Bars: For a truly premium feel, some users combine a visual Progress Bar with a Fraction counter. If the plugin supports multiple pagination types, enable both. If not, the Fraction is usually the more informative choice for large galleries.
- Format: The output is usually “Current / Total”. It is ideal for linear storytelling where the end goal matters (e.g., “Step 3 / 5”).