1. не то событие
2. пересохраняешь window.slider 2 раза. зачем? сделай для них разные переменные и вообще желательно внутри document.ready а не в глобале
<a href="#modal" id="fancybox">Показать слайдер в окне</a>
<div class="modal" id="modal">
<div class="slider">
<div id="slick">
<div class="slider__item">
<div>1</div>
</div>
<div class="slider__item">
<div>2</div>
</div>
<div class="slider__item">
<div>3</div>
</div>
<div class="slider__item">
<div>4</div>
</div>
<div class="slider__item">
<div>5</div>
</div>
<div class="slider__item">
<div>6</div>
</div>
<div class="slider__item">
<div>7</div>
</div>
</div>
</div>
<div class="slider">
<div id="slick2">
<div class="slider__item">
<div>11</div>
</div>
<div class="slider__item">
<div>22</div>
</div>
<div class="slider__item">
<div>33</div>
</div>
<div class="slider__item">
<div>44</div>
</div>
<div class="slider__item">
<div>55</div>
</div>
<div class="slider__item">
<div>66</div>
</div>
<div class="slider__item">
<div>77</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$('#fancybox').fancybox({
autoSize: true,
afterShow: function() {
var main = '#slick';
var support = '#slick2';
$(main).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: support,
dots: false,
responsive: true
});
$(support).slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: main,
dots: true,
centerMode: true,
variableWidth: true,
focusOnSelect: true
});
}
});
})