Replace UIkit Dotnav Dots with Numbers

Inspect the full details and code of a selected snippet

<div class="uk-section uk-section-default">
  <div class="uk-container">
	<div class="uk-text-small">
      Some CSS styling for counters still required.
    </div>
    <div uk-slider>
      <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1">
        <div class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-4@m">
          <div>
            <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=600&q=80" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>1</h1></div>
          </div>
          <div>
            <img src="https://images.unsplash.com/photo-1761500881530-264650a50f24?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=600&q=80" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>2</h1></div>
          </div>
          <div>
            <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=600&q=80" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>3</h1></div>
          </div>
          <div>
            <img src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=600&q=80" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>4</h1></div>
          </div>
          <div>
            <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=600&q=80" width="400" height="600" alt="">
            <div class="uk-position-center uk-panel"><h1>5</h1></div>
          </div>
        </div>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href uk-slidenav-previous uk-slider-item="previous"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href uk-slidenav-next uk-slider-item="next"></a>
      </div>
      <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin uk-numnav"> </ul>     
    </div>
    
    
    
  </div>
</div>

Information

Detailed overview of a selected code snippet

yaneony

04.11.2025, 20:39:13

04.11.2025, 20:59:43

uk-active, uk-child, uk-container, uk-dotnav, uk-flex, uk-hidden, uk-light, uk-margin, uk-numnav, uk-panel, uk-position, uk-section, uk-slidenav, uk-slider, uk-text, uk-visible

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!