Перенести transition в :hover

.certificate {
  width: 250px;
  margin: 100px 30px 10px 30px;
}

.certificate:hover {
  transition: transform 0.5s;
  transform: scale(2);
}

набросил на скорую руку
пример решения
надо подточить под себя

var num = 1;
$('.b1').on('click', function (e) {
  num = parseInt($(this).data('num')); 
})

$('.modal').on('shown.bs.modal', function () {
  $('.slider__prod').slick({
    initialSlide: num-1,
    arrows: true,
    prevArrow: '<button class="slick-prev slick-arrow" aria-label="Prev" type="button" style=""><i class="fa fa-chevron-left" aria-hidden="true"></i></button>',
    nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><i class="fa fa-chevron-right" aria-hidden="true"></i></button>'
  });
});

Уверен что спустя непродолжительное время включите обратно, ну а выключить можно в меню
View -> Hide Minimap