Сова-карусель внутри всплывающего окна показывает ширину 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
            });