弹出窗口内的猫头鹰旋转木马在第一位置显示宽度 0

Question

我正在尝试将猫头鹰轮播放入创建的自定义弹出窗口中，弹出窗口将在单击链接时显示

$('#r1').click(function() {
      $('.fullview').addClass('show');
      $('body').addClass('popupopened');
      owlCar();
      $('.r1').css('opacity', '1');
      $('.r1').css('display', 'block');
  });

在此弹出窗口中，

我在此弹出窗口中显示猫头鹰轮播，但首先它没有显示，但在窗口更改或第二次打开时显示回来：

function owlCar() {
            $("#owl-demo").owlCarousel({
                navigation: true, // Show next and prev buttons
                slideSpeed: 300,
                paginationSpeed: 400,
                singleItem: true,
                items: 1
            });
        }
        owlCar();

.CSS：

.r1,
.r2,
.r3,
.r4,
.r5,
.r6 {
    opacity: 0;
    transition: opacity 1s;
    position: absolute;
    width: 0;
    height: 0;
    transition: width 1s, height 1s, opacity 1s;
}
.fullview.show {
    opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    transition: opacity 1s;
}
.fullview.show .r1,
.fullview.show .r2,
.fullview.show .r3,
.fullview.show .r4,
.fullview.show .r5,
.fullview.show .r6 {
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    top: 0;
    left: 0;
    transition: opacity 1s;
    display: none;
}

.popupopened {
    overflow: hidden;
    transition: opacity 1s;
}

Answer 1

我也是这样做的。点击事件我试过这个：

$('#r1').click(function() {
            $('.fullview').addClass('show');
            $('body').addClass('popupopened');
            var owl2 = $("#owl-demo");
            owl2.owlCarousel({
                loop: true,
                margin: 20,
                navRewind: false,
                dots: true,
                autoWidth: true,
                items: 2
            });