Как синхронизировать 2 галереи, одна из которых в модальном окне?

Question

Всем привет. У меня есть галерея на swiper c превьюшками. При клике на слайд вызывается бутстраповское модальное окно, в котором точно такая же галерея, но побольше. Мне нужно эти 2 галереи синхронизировать: если я кликаю по второму слайду, то в модальном окне тоже должен быть активным второй слайд. Пытаюсь сделать это так:

 $('.js-pg-thumbs .swiper-slide').on('click', function() {
    galleryModalTop.slideTo($(this).index());
    galleryModalThumbs.slideTo($(this).index());
});

Не работает. Если просто 2 галереи на странице, то работает отлично, а в модальном окне не работает. Бутстрап 3-ий.

Подскажите, как переписать код правильно.

let galleryThumbs = new Swiper('.js-pg-thumbs', {
            slidesPerView: 4,
            keyboard: true,
            mousewheel: true,
        });

        let galleryTop = new Swiper('.js-pg-slides', {
            thumbs: {swiper: galleryThumbs},
            keyboard: true,
            mousewheel: true,
        });
        
        $(document).ready(function () {
            $('.js-pg-slides .swiper-slide').click(function (evt) {

                $('#productModalGallery').on('show.bs.modal', function (evt) {

                    galleryModalThumbs = new Swiper('.js-pgm-thumbs', {
                        slidesPerView: 4,
                        keyboard: true,
                        mousewheel: true,
                    });

                    galleryModalTop = new Swiper('.js-pgm-slides', {
                        thumbs: {swiper: galleryModalThumbs},
                        keyboard: true,
                        mousewheel: true,
                    });

                });

                $('#productModalGallery').on('shown.bs.modal', function (e) {
                    galleryModalThumbs.update();
                    galleryModalTop.update();
                });

                $('#productModalGallery').modal();

                $('.js-pg-thumbs .swiper-slide').on('click', function() {
                    galleryModalTop.slideTo($(this).index());
                    galleryModalThumbs.slideTo($(this).index());
                });

            });
            
});

img {max-width:100%;}
        .swiper-container {
            margin: 0 auto;
            overflow: hidden;
            width: 500px;
            position: relative;
            z-index: 1; // Fix of Webkit flickering
        }
        .swiper-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            z-index: 1;
            display: flex;
            transition-property: transform;
            box-sizing: content-box;
        }
        .swiper-slide {
            flex-shrink: 0;
            width: 100%;
            height: 300px;
            position: relative;
            transition-property: transform;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            cursor: pointer;
        }
        .product-gallery__thumbs .swiper-wrapper {
            flex-wrap: wrap;
            transform: none!important;
        }
        .product-gallery__thumbs .swiper-slide {
            border: solid 1px #ccc;
            width: 58px!important;
            height: 58px;
             margin: 0 4px 4px 0;
        }
        .product-gallery__thumbs .swiper-slide-thumb-active {
            border-color: red;
        }
    }

    <div class="swiper-container product-gallery__slides js-pg-slides">
        <div class="swiper-wrapper">

                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                    </div>

        </div>
    </div>

    <div class="swiper-container product-gallery__thumbs js-pg-thumbs">

            <div class="swiper-wrapper">

                     <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                    </div>
                    <div class="swiper-slide">
                        <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                    </div>

            </div>

    </div>
    
    <div class="modal fade" id="productModalGallery" role="dialog" aria-labelledby="ModalViewBigGallery">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
        <div class="modal__body product-gallery">
        
            <div class="swiper-container product-gallery__slides js-pgm-slides">
                    <div class="swiper-wrapper">

                                <div class="swiper-slide">
                                    <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                                </div>

                    </div>
                </div>

                <div class="swiper-container product-gallery__thumbs js-pgm-thumbs">

                        <div class="swiper-wrapper">

                                 <div class="swiper-slide">
                                    <img src="https://loremflickr.com/1200/960/girl/all?random=1" alt="" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://loremflickr.com/1200/960/girl/all?random=2" alt="" />
                                </div>
                                <div class="swiper-slide">
                                    <img src="https://loremflickr.com/1200/960/girl/all?random=3" alt="" />
                                </div>

                        </div>

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

БЛОГ НА HUSL

Как синхронизировать 2 галереи, одна из которых в модальном окне?

Ответы (0 шт):