滑动图像轮播的项目符号消失，仅在单击模态时出现

Question

大家好，我在图像旋转木马的Swiper上遇到了一些麻烦，它们消失了，只有在我打开模态并关闭它时才会出现

所以这是模态，正如您所看到的，我在模态内部和外部都使用了swiper，因为我有两个图像轮播，一个在模态打开时旋转，另一个在未打开时旋转，但问题是在图像下导航的项目符号模态外部的轮播消失，直到我打开模态，所以我认为它是因为它可能与模态中的一个旋转体相连，但是我不确定为什么，因为我在jquery中给了它们不同的位置

<div class="modal fade bd-example-modal-lg modalBlur carousel_modal" id="imagemodal" tabindex="-1"
                    role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                    <div class="modal-dialog">
                        <div class="carousel-content">
                            <div class="modal-body">
                                <button type="button" class="close_carousel" data-dismiss="modal"><img class="close_position"
                                                                                                       src="<?php echo get_stylesheet_directory_uri() ?>/assets/images/letter-x.png"><span
                                            class="sr-only">Close</span></button>
                                <div class="carousel-wrapper carousel_for_modal">

                                    <div class="swiper-button-modal-prev swiper-button prev_icon style">
                                        <span class="dashicons dashicons-arrow-left"></span>
                                    </div>

                                    <div class="swiper-container">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <div class="slider-inner carousel_image">
                                                    //I get the image through PHP here
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-pagination pagination_modal"></div>
                                    <div class="swiper-button-modal-next swiper-button next_icon">
                                        <span class="dashicons dashicons-arrow-right"></span>
                                    </div>

                                </div>
                            </div>
                        </div>


                    </div>
                </div>

                <div class="swiper-pagination swiper-pagination-bullets swiper-pagination-bullets-dynamic"></div>
                <div class="swiper-button-next swiper-button">
                    <span class="dashicons dashicons-arrow-right"></span>
                </div>
                <div class="swiper-button-prev swiper-button">
                    <span class="dashicons dashicons-arrow-left"></span>
                </div>
            </div>

在jQuery上就像这样

jQuery(document).ready(function ($) {
    $('.image-carousel .carousel-wrapper').each(function (index) {
        var $this = $(this).addClass('wrapper' + index);
        $(this).find('.swiper-container').addClass('swiper-item-' + index);
        $(this).find('.swiper-button-prev, .swiper-button-next, .swiper-pagination').addClass('swiper-item-' + index);

        var imageCarousel = new Swiper('.image-carousel .wrapper' + index + ' .swiper-container' + '.swiper-item-' + index, {
            observer: true,
            observeParents: true,
            slidesPerView: 'auto',
            pagination: {
                el: '.image-carousel .wrapper' + index + ' .swiper-pagination' + '.swiper-item-' + index,
                clickable: true,
                dynamicBullets: true,

            },
            navigation: {
                nextEl: '.image-carousel .wrapper' + index + ' .swiper-button-next' + '.swiper-item-' + index,
                prevEl: '.image-carousel .wrapper' + index + ' .swiper-button-prev' + '.swiper-item-' + index,
            },
            spaceBetween: 20,
            breakpoints: {
                992: {
                    slidesPerView: 2.2
                },
                460: {
                    slidesPerView: 1.1
                }
            },
        });
    });
    $('.pop').on('click', function () {
        $('.image-carousel .carousel_for_modal').each(function (index) {
            var $this = $(this).addClass('wrapper' + index);
            $(this).find('.swiper-container').addClass('swiper-item-' + index);
            $(this).find('.swiper-button-modal-prev, .swiper-button-modal-next, .pagination_modal').addClass('swiper-item-' + index);
            // $('.image_on_modal').attr('src', $(this).find('img').attr('src'));

            var imageCarousel1 = new Swiper('.image-carousel .wrapper' + index + ' .swiper-container' + '.swiper-item-' + index, {
                observer: true,
                observeParents: true,
                slidesPerView: 'auto',
                pagination: {
                    el: '.image-carousel .wrapper' + index + ' .pagination_modal' + '.swiper-item-' + index,
                    clickable: true,
                    dynamicBullets: true,
                },
                navigation: {
                    nextEl: '.image-carousel .wrapper' + index + ' .swiper-button-modal-next' + '.swiper-item-' + index,
                    prevEl: '.image-carousel .wrapper' + index + ' .swiper-button-modal-prev' + '.swiper-item-' + index,
                },
                spaceBetween: 10,
                breakpoints: {
                    992: {
                        slidesPerView: 2.2
                    },
                    768: {
                        slidesPerView: 1.8
                    },
                    460: {
                        slidesPerView: 1.1,
                    },
                    375:{
                        slidesPerView: 1.1,
                        spaceBetween: 30
                    }
                }
            });
        });
        $('#imagemodal').modal('show');
    });
});

可能是因为这个班吗？ “ .image-carousel”