clearInterval and setInterval creates a break

Question

I created a slider. As long as it runs automatically, everything works fine. As soon as you click on a bullet, the correct screenshot is displayed but only after a pause (the pause is as long as the interval, in the example 3000 ms). Please help.

$(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);
}