Question

在Fancybox模态窗口中，我有Flickity轮播。在iPad上，当我更改方向时，Flickity会停止正常工作。 flickity-viewport显示为0px。桌面窗口大小调整没有问题。不确定在iPad上更改方向时如何更新Flickity。

https://jsfiddle.net/2zb5qesa/13/embedded/result/

$(document).ready(function() {
  $('.carousel-container').each( function( i, container ) {
    var $container = $( container );
    // main Flickity
    var $carouselMain = $container.find('.carousel-main').flickity({
      imagesLoaded: true,
      percentPosition: false,
      pageDots: false,
      adaptiveHeight: true
    });
    // nav Flickity
    $container.find('.carousel-nav').flickity({
      asNavFor: $carouselMain[0],
      contain: true,
      pageDots: false,
      groupCells: true,
      adaptiveHeight: true,
      prevNextButtons: false
    });
  });

  $("[data-fancybox]").fancybox({
    idleTime : false,
    smallBtn: false, 
    buttons : [
      'close'
    ],
    touch : {
       vertical : false,
       momentum : false
    },
    wheel : false,
    afterShow: function( instance, slide ){
      slide.$slide.find('.carousel-main').flickity('resize');
      slide.$slide.find('.carousel-nav').flickity('resize');
    }
  });
});

.carousel {
  background: #FAFAFA;
  margin-bottom: 40px;
}

.carousel-cell {
  width: 100%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

/* cell number */
.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

.carousel-nav .carousel-cell {
  height: 80px;
  width: 100px;
}

.carousel-nav .carousel-cell:before {
  font-size: 50px;
  line-height: 80px;
}

.carousel-nav .carousel-cell.is-nav-selected {
  background: #ED2;
}

.modal-window {
	width: 985px;
	padding: 0;
	background: none;
}
.modal-window-inner {
	width: 980px;
	padding: 40px;
	position: relative;
	background: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/flickity@2.1.2/dist/flickity.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/flickity@2.1.2/dist/flickity.css" rel="stylesheet"/>
<a data-src="#p1" href="javascript:;" data-fancybox="gallery">MODAL 1</a>
<a data-src="#p2" href="javascript:;" data-fancybox="gallery">MODAL 2</a>

<div style="display: none;" id="p1" class="modal-window">
  <div class="modal-window-inner">
    <div class="carousel-container">
      <div class="carousel carousel-main">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-main -->
      <div class="carousel carousel-nav">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-nav -->
    </div>
    <!-- /.carousel-container -->
  </div>
  <!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->

<div style="display: none;" id="p2" class="modal-window">
  <div class="modal-window-inner">
    <div class="carousel-container">
      <div class="carousel carousel-main">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-main -->
      <div class="carousel carousel-nav">
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
        <div class="carousel-cell"></div>
      </div>
      <!-- /.carousel-nav -->
    </div>
    <!-- /.carousel-container -->
  </div>
  <!-- /.modal-window-inner -->
</div>
<!-- /.modal-window -->

Answer 1

我认为这是因为fancybox在设备方向更改事件上暂时隐藏了内容，也许尝试为fancybox添加此内容，看看是否有帮助：

onUpdate : function( instance, slide ) {
    slide.$slide.find('.carousel-main').flickity('resize');
    slide.$slide.find('.carousel-nav').flickity('resize');
}

Fancybox + Flickity。 iOS方向问题

1 个答案: