jquery modal上的猫头鹰caorusel仅在检查时起作用

这是一个wordpress网站，在产品图片上有猫头鹰旋转木马，但我们想要 Build 一个弹出模式，同时显示轮播 . 在打开模态时，图像以100px宽度和100px移动内联显示，因此如果我将css宽度硬编码为我想要的宽度，那么移动仍然是100px . 没有硬编码， when inspecting the element then the image resizes and works perfectly . 但只是打开它而不检查显示内嵌的小图像 .

我已经尝试添加owlCarousel函数来更改选项，但它不起作用，它无法识别该功能 . css位于页眉上，js位于页脚上 .

有任何想法吗？？？也许在模态上创建旋转木马的其他方式？这是代码：

<div id="ex1" class="modal">
<?php
    if ( has_post_thumbnail() ) {
        $attachment_count = count( $product->get_gallery_attachment_ids() );
        $gallery          = $attachment_count > 0 ? '[product-gallery]' : '';
        $props            = wc_get_product_attachment_props( get_post_thumbnail_id(), $post );
        $image            = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
            'title'  => $props['title'],
            'alt'    => $props['alt'],
        ) );
        echo apply_filters(
            'woocommerce_single_product_image_html',
            sprintf(
                '
<div class="owl-carousel-slider" width="3440px"><span><img src="%s"></span>',
                esc_url( $props['url'] ),
                esc_attr( $props['caption'] ),
                $gallery,
                $image
            ),
            $post->ID
        );

    foreach ( $attachment_ids as $attachment_id ) {

        $classes = array( 'zoom' );

        if ( $loop === 0 || $loop % $columns === 0 ) {
            $classes[] = 'first';
        }

        if ( ( $loop + 1 ) % $columns === 0 ) {
            $classes[] = 'last';
        }

        $image_class = implode( ' ', $classes );
        $props       = wc_get_product_attachment_props( $attachment_id, $post );

        if ( ! $props['url'] ) {
            continue;
        }

        echo apply_filters(
            'woocommerce_single_product_image_thumbnail_html',
            sprintf(
                '<span><img src="%s"></span>',
                esc_url( $props['url'] ),
                esc_attr( $image_class ),
                esc_attr( $props['caption'] ),
                wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $props )
            ),
            $attachment_id,
            $post->ID,
            esc_attr( $image_class )
        );

        $loop++;

    }
    echo '</div>';
}

     else {
        echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
    }
?>
</div>