1

При открытии модального окна слайдер неправильно отображается до тех пор, пока не начнет кликать на слайды или ресайзить окно.

И неправильно отображается при повторном запуске модалки.

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> -->

Пример codepen

3 ответа 3

2

Я запустил инициализацию слайдера в afterShow, убрал инициализацию слайдера вне фэнсибокса, убрал .refresh() до вызова — вроде бы работает так, как ожидается; скриншот: http://prntscr.com/ddy6dt.


Форк вашего кодпена: http://codepen.io/sandmanisdancing/pen/eByYLm

2

Вообщем ничего так и не помогло, кроме задание дополнительных стилей.

Блок внутри модального окна, содержащий слайдер, обязательно должен быть display: block, а вот скрыть его можно например так:

visibility: hidden;
position: absolute;
left: -9999px;

При открытии окна, соответственно, блок со слайдером задаем видимым:

.fancybox-opened .h__modal {
    visibility: visible;
    position: static;
    left: 0;
}

$(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();
	    }
    });
  
  
  $('.h__slider-win').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    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').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    arrows: false,
    dots: false,
    infinite: false,		
    asNavFor: '.h__slider-win',
    focusOnSelect: true,
    vertical: false
  }); 
});
img {
  max-width: 100%;
  width: 100%;
}

.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;
}

.h__slider {
    width: 520px;
}

.h__modal {
    display: block !important;
    visibility: hidden;
    position: absolute;
    left: -9999px;
    overflow: hidden;
    border-radius: 0;
    -webkit-box-shadow: 5px 5px 17px 5px rgba(0,0,2,0.81);
    -moz-box-shadow: 5px 5px 17px 5px rgba(0,0,2,0.81);
    box-shadow: 5px 5px 17px 5px rgba(0,0,2,0.81);
}

.fancybox-opened .h__modal {
    visibility: visible;
    position: static;
    left: 0;
}

.h__slider-win__item {
   height: 380px;
}
<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>

P.S: для .h__slider необходимо задавать ширину (max-width, width - не срабатывают).

0

Как вариант:

$("[data-src='#product-modal']").click(function() {
    setTimeout(() => $('.product__view__slider').slick('setPosition'), 100);
})

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.