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

弹出窗口中的猫头鹰轮播显示宽度0为首位

1 个答案: