Creé un control deslizante. Mientras se ejecuta automáticamente, todo funciona bien. Tan pronto como hace clic en una viñeta, se muestra la captura de pantalla correcta, pero solo después de una pausa (la pausa es tan larga como el intervalo, en el ejemplo, 3000 ms). Por favor ayuda.

 $(document).ready(function() { $('.s12 .bg').after('<img src="https://xxx/wpfiles/img/pdf12s1.png" class="sh">'); $('.s12 .bg').after('<img src="https://xxx/wpfiles/img/pdf12sx.png" class="shbg">'); slide('s2'); $('.bull').on('click', function() { var id = $(this).attr('id'); slide(id); }); }); var interval; function slide(id) { var bulls = []; src = []; $('.bull').each(function() { bid = $(this).attr('id'); bulls.push(bid); src.push('https://xxx/wpfiles/img/pdf12' + bid + '.png'); }); posb = bulls.indexOf(id); clearInterval(interval); interval = setInterval(function() { console.log(bulls[posb]); $('.s12 .sh').hide().attr('src', src[posb]).show(); //.addClass('sleft').fadeIn(400); $('.bull').attr('class', 'bull'); $('#' + bulls[posb]).addClass('active'); posb++; if (posb == bulls.length) posb = 0; }, 3000, posb); }