I have a product image slider.

You can go to the next slide using the side circles.

I want to click on the photo to go to the next slide. And this feature can also be supported on mobile.

My JavaScript code :

function controls() {
    $(this).addClass('selected').siblings('button').removeClass('selected');
    $('.slideDiv1000').animate({
      top: -$('.container1000').height() * $(this).index()
    }, 450);
}

/***Event Listeners***/
const runCode = () => {
    const button = document.querySelectorAll('.button');
    if ( button ) {
      for ( var i = 0; i < button.length; i++ ) {                     
        button[i].addEventListener('click', controls, false);
      }
    }
}

runCode();