How to add navigation button (the dots) on a wix pro Gallery slideshow using some code

Ask the community
,
1

Hello i want to ask this, is there any possibilities to add some navigation button the dots on a wix pro gallery slideshow, or any kind of navigation besides the arrow,

thanks

2

This code will create three navigation dots, and attach them to the Gallery slideshow so that they highlight the current slide and allow the user to navigate between slides by clicking on the dots. You can customize the appearance of the dots using the CSS styles, and add or remove dots as needed by adjusting the HTML code.

<style>
  .nav-dots {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .nav-dot {
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
  }

  .nav-dot.active {
    background-color: #333;
  }
</style>

<div class="nav-dots">
  <div class="nav-dot"></div>
  <div class="nav-dot"></div>
  <div class="nav-dot"></div>
</div>

<script>
  const navDots = document.querySelectorAll('.nav-dot');
  const gallery = document.querySelector('.wix-gallery');

  function updateNavDots() {
    const currentIndex = gallery.currentIndex;
    navDots.forEach((dot, index) => {
      if (index === currentIndex) {
        dot.classList.add('active');
      } else {
        dot.classList.remove('active');
      }
    });
  }

  navDots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
      gallery.goToSlide(index);
      updateNavDots();
    });
  });

  updateNavDots();
</script>
3

thanks sir, i am new to wix, how can i attach the html code to wix gallery exactly?

4

Will this work on editor x as well? As someone with 0 knowledge in coding I don’t know how to connect it to a existing gallery. Could you help with this?