Toggle dots header

Is there an easy way to add toggle dots on the images in the slider header in case someone wishes to advance the images?

Hello there,

I hope you’re doing well today.

Thank you for contacting us about our theme Sydney Pro. I am happy to help with your queries.

To add dots navigation on the main slide header, try adding doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

       'use strict'
       if ( $( ".sydney-hero-area #slideshow" ).length ) {
         $('.sydney-hero-area #slideshow').superslides({
           play: $('.sydney-hero-area #slideshow').data('speed'),
           animation: 'fade',
           pagination: true,

  1. Update
  2. Add the below CSS code to Appearance > Customize > Additional CSS from dashboard.
    .slides-pagination {
      display: block;
      width: 100%;
      position: absolute;
      bottom: 5px;
      left: 0;
      text-align: center;
      z-index: 10;

    .slides-pagination a {
      text-indent: -9999px;
      display: inline-block;
      width: 10px;
      height: 10px;
      margin-left: 3px;
      margin-right: 3px;
      background-color: #fff000;
      border-radius: 100%;

    .slides-pagination a:hover,
    .slides-pagination a.current {
      background-color: #ff0000;

You may need to flush the cache, cookie, and history on your web browser before reloading your site to prevent it to load the cached version of your website. You may also need to flush the cache on your site as well (if applied).

Let me know how it goes.

aThemes Support

Thank you! Worked great.

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

aThemes Support