Question

我正在动态添加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');

});

我尝试在刷新旋转木马之前/之后使用调整大小的方法，但它不起作用。任何想法如何解决它？感谢

Answer 1

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

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

猫头鹰旋转木马没有调整设置选项

1 个答案: