Антон Кирпач

Если вручную сделать сложно то можно использовать готовое решение на подобе Slick слайдера (слайдер с миниатюрами)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">

animate.min.css не подключен

Простой плагин http://stickyjs.com/

Как по мне то Remodal довольно неплохой.

А может наоборот все (fancybox в slick слайдере)?

<a href="#modal">Кнопка</a>
<div class="remodal" data-remodal-id="modal">
	  <button data-remodal-action="close" class="remodal-close"></button>
	  <h1>Remodal</h1>
	  	    <section class="regular slider">
    <div>
      <img src="http://placehold.it/350x300?text=1">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=2">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=3">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=4">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=5">
    </div>
    <div>
      <img src="http://placehold.it/350x300?text=6">
    </div>
  </section>
	  <br>
	  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
	  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

$(document).on('opened', '.remodal', function () {
	  $(".regular").slick('reinit');
	});

$(document).on('ready', function() {
		
      $(".regular").slick({
        dots: true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
});

4 только влезет если убрать div c классом clearfix visible-lg