猫头鹰轮播未调整为设置选项的大小答案

【问题标题】：Owl carousel is not resizing to setted options猫头鹰轮播未调整为设置选项的大小
【发布时间】：2018-01-24 16:02:02
【问题描述】：

我正在动态添加 Owl Carousel 项目。它以正常方式添加，但是当我滚动到第二页以检查添加的图像时，它必须更小（大约 30% 高度）。如果我调整浏览器大小，它会变成正确的大小。

  $(".all_diplomas").owlCarousel({
        loop: true,
        margin: 15,
        responsive: {
            1000: {
                items: 4
            },
            1200: {
                items: 2
            }
        },
    });


$('input#generateInputsForDiplomas').on('click',function() {
var template = '<div class="item"> <div class="content_diplomas autoHeightClass"> <a data-fancybox="gallery" href="images/6.jpg"><i class="material-icons">search</i></a>' +
                   '<figure><img src="images/6.jpg" alt=""></figure> </div> </div>';

    $('.all_diplomas').trigger('add.owl.carousel', [template]).trigger('resize.owl.carousel').trigger('refresh.owl.carousel');

});

我尝试在刷新轮播之前/之后使用 resize 方法，但它不起作用。任何想法如何解决它？谢谢

【问题讨论】：

标签： javascript jquery css twitter-bootstrap owl-carousel

【解决方案1】：

可能不是最好的方法，但是通过调用 JS 事件解决了 resize，不会产生任何视觉效果，而是根据需要解决问题。

window.dispatchEvent(new Event('resize'));

【讨论】：