При открытии модального окна слайдер неправильно отображается до тех пор, пока не начнет кликать на слайды или ресайзить окно.
И неправильно отображается при повторном запуске модалки.
beforeShow
, beforeLoad
не помогает.
В чем может быть причина?
$(document).ready(function(){
// Prev
$(".fancybox").fancybox({
width: 520,
minWidth: 520,
margin: 10,
padding: 0,
maxHeight: 300,
height: 300,
fitToView: false,
autoWidth: false,
autoSize: false,
helpers : {
title : {
type: 'inside',
position : 'top'
},
css : {
'background' : 'rgba(0, 0, 0, 0.58)'
}
},
tpl: {
next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"></a>',
prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"></a>'
},
beforeLoad : function() {
this.title = $(this.element).find('span').html();
},
beforeShow : function() {
$('.h__slider-win').not('.slick-initialized').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: false,
infinite: false,
centerMode: false,
asNavFor: '.h__slider-control',
prevArrow:'<button class="slick-prev"></button>',
nextArrow:'<button class="slick-next"></button>'
});
$('.h__slider-control').not('.slick-initialized').slick({
slidesToShow: 5,
slidesToScroll: 1,
arrows: false,
dots: false,
infinite: false,
asNavFor: '.h__slider-win',
focusOnSelect: true,
vertical: false
});
}
});
});
// $('.h__slider-win').not('.slick-initialized').slick({
// slidesToShow: 1,
// slidesToScroll: 1,
// arrows: true,
// dots: false,
// infinite: false,
// centerMode: false,
// asNavFor: '.h__slider-control',
// prevArrow:'<button class="slick-prev"></button>',
// nextArrow:'<button class="slick-next"></button>'
// });
// $('.h__slider-control').not('.slick-initialized').slick({
// slidesToShow: 5,
// slidesToScroll: 1,
// arrows: false,
// dots: false,
// infinite: false,
// asNavFor: '.h__slider-win',
// focusOnSelect: true,
// vertical: false
// });
.h__modal {
display: none;
}
.slick-slide img {
max-width: 100%;
width: 100%;
height: auto;
}
.fancybox {
border: 1px solid #ddd;
text-decoration: none;
display: inline-block;
padding: 1rem 2rem;
}
.h__slider-win {
max-height: 200px;
border-bottom: 2px solid #fff;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<a href="#h-1" class="fancybox">modal1</a>
<a href="#h-2" class="fancybox">modal2</a>
<a href="#h-3" class="fancybox">modal3</a>
<div id="h-1" class="h__modal">
<div class="h__slider">
<div class="h__slider-win">
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
<div class="h__slider-control">
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
</div>
</div>
<div id="h-2" class="h__modal">
<div class="h__slider">
<div class="h__slider-win">
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
<div class="h__slider-control">
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
</div>
</div>
<div id="h-3" class="h__modal">
<div class="h__slider">
<div class="h__slider-win">
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
<div class="h__slider-control">
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
</div>
</div>
<!-- <div class="h__slider">
<div class="h__slider-win">
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-win__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
<div class="h__slider-control">
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
<div class="h__slider-control__item">
<img src="https://dummyimage.com/300x200/000/fff" alt="">
</div>
</div>
</div> -->