Swiper slider в повторителе ACF

Question

Создал swiper-slider с мини-слайдером миниатюр. Все работает нормально. При помещении слайдера в повторитель ACF и создании второго слайдера внутри повторителя перестают отображаться оба. При этом оба мини-слайдера отображаются. В мини-слайдере происходит создание разных ID для разных мини-слайдеров, а также происходит присвоение необходимых классов. В большом слайдере классы и ID не назначаются, но стили подтягиваются. Слайдер используется в шаблоне страницы. При применении данного шаблона на разных страницах сайта слайдер нормально создается и ему присваивается свой ID. Получается, что только внутри повторителя происходит сбой. Как можно добиться нормальной работы?

<?php if( have_rows('otzyv_proekt') ): ?>
                <div class="otzyvy_wrapper">
                    <?php while ( have_rows('otzyv_proekt') ) : the_row(); ?>
                    <div class="otzyvy-item">
                        <div class="slider-wrapper">
                            <div class="swiper-container otzyvy-slider" style="position: relative;">
                                <div class="swiper-wrapper otzyvy-slider_wrapper">
                                    <?php if( have_rows('slajder_otzyvov') ):
                                        while ( have_rows('slajder_otzyvov') ) : the_row(); ?>
                                    <div class="swiper-slide slider-slide otzyvy-slider_slide" style="height: 300px;">
                                        <div class="otzyvy-slider_image">
                                            <?php if( get_sub_field('izobrazhenie_slajdera_otzyvov') ): ?>
                                                <img src="<?php the_sub_field('izobrazhenie_slajdera_otzyvov'); ?>" alt="img" />
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                    <?php endwhile;
                                    else :
                                    endif;
                                    ?>
                                </div>
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>
                            </div>
                            <div class="otzyvy-mini-slider swiper-container">
                                <div class="swiper-wrapper otzyvy-mini-slider_wrapper">
                                    <?php if( have_rows('mini_slajder_otzyvov') ):
                                        while ( have_rows('mini_slajder_otzyvov') ) : the_row(); ?>
                                        <div class="swiper-slide otzyvy-mini-slider_slide">
                                            <div class="otzyvy-mini-slider_image mini-slider_image">
                                                <?php if( get_sub_field('izobrazhenie_mini-slajdera_otzyvov') ): ?>
                                                    <img src="<?php the_sub_field('izobrazhenie_mini-slajdera_otzyvov'); ?>" alt="img" />
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                        <?php endwhile;
                                        else :
                                        endif;
                                        ?>
                                </div>
                            </div>
                        </div>
                        <div class="otzyvy-data-wrapper">
                            <h4><?php the_sub_field('nazvanie_proekta'); ?></h4>
                            <p><strong>Адрес: </strong><?php the_sub_field('adres_proekta'); ?></p>
                            <p><strong>Сумма: </strong><?php the_sub_field('stoimost_proekta'); ?></p>
                            <p style="margin: 25px 0;"><strong>Характеристики:</strong></p>
                            <?php if( have_rows('harakteristiki_otzyva') ):
                                while ( have_rows('harakteristiki_otzyva') ) : the_row(); ?>
                                    <p style="margin-bottom: 0; margin-top: 5px;"><?php the_sub_field('punkt_harakteristik_proekta'); ?></p>
                                <?php endwhile;
                            endif;
                            ?>
                            <p style="font-size: 15px; 'margin-top: 20px;"><?php the_sub_field('tekst_otzyva'); ?></p>
                            <p style="font-size: 15px; 'margin-top: 20px;"><strong><?php the_sub_field('avtor_otzyva'); ?></strong></p>
                        </div>
                        <hr style="margin-top: 70px;;">
                    </div>
                    <?php endwhile; ?>
                </div>
                <?php endif; ?>




<script>
new Swiper ('.otzyvy-slider', {

    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
    },
    
    slidesPerView: 1,

    thumbs: {
        swiper: {
            el: '.otzyvy-mini-slider',
            slidesPerView: 7,
        }
    },
});
</script>

Answer 1

Проблема решена. При инициации слайдера мы должны предусмотреть присвоение каждому новому слайдеру в повторителе свой ID. В вышеприведенном коде это должно выглядеть так:

<?php if( have_rows('otzyv_proekt') ): ?>
<div class="otzyvy_wrapper">
    <?php $sliderId = 1; ?>
    <?php while ( have_rows('otzyv_proekt') ) : the_row(); ?>
    <div class="otzyvy-item">
        <div class="slider-wrapper">
            <div class="swiper-container otzyvy-slider otzyvy-slider-<?= $sliderId?>" data-id="<?= $sliderId?>">
                <div class="swiper-wrapper otzyvy-slider_wrapper">
                <?php if( have_rows('slajder_otzyvov') ):
                while ( have_rows('slajder_otzyvov') ) : the_row(); ?>
                <div class="swiper-slide slider-slide otzyvy-slider_slide" style="height: 300px;">
                    <div class="otzyvy-slider_image">
                    <?php if( get_sub_field('izobrazhenie_slajdera_otzyvov') ): ?>
                        <img src="<?php the_sub_field('izobrazhenie_slajdera_otzyvov'); ?>" alt="img" />
                    <?php endif; ?>
                    </div>
                </div>
                <?php endwhile;
                   else :
                   endif;
                ?>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="otzyvy-mini-slider swiper-container otzyvy-mini-slider-<?= $sliderId?>">
            <div class="swiper-wrapper otzyvy-mini-slider_wrapper">
                <?php if( have_rows('mini_slajder_otzyvov') ):
                    while ( have_rows('mini_slajder_otzyvov') ) : the_row(); ?>
                    <div class="swiper-slide otzyvy-mini-slider_slide">
                        <div class="otzyvy-mini-slider_image mini-slider_image">
                            <?php if( get_sub_field('izobrazhenie_mini-slajdera_otzyvov') ): ?>
                                <img src="<?php the_sub_field('izobrazhenie_mini-slajdera_otzyvov'); ?>" alt="img" />
                            <?php endif; ?>
                        </div>
                    </div>
                    <?php endwhile;
                        else :
                        endif;
                    ?>
                </div>
            </div>
        </div>
            
<script>
const otzyvySliders = document.querySelectorAll('.otzyvy-slider') ;
otzyvySliders.forEach(buildOtzyvySlider);

function buildOtzyvySlider (slider) {
    const sliderId = slider.dataset.id;
    
    new Swiper (`.otzyvy-slider-${sliderId}`, {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        slidesPerView: 1,
        lazy: true,
        thumbs: {
            swiper: {
                el: `.otzyvy-mini-slider-${sliderId}`,
                slidesPerView: 7,
                lazy: true,
            }
        },
    });
}
</script>

БЛОГ НА HUSL

Swiper slider в повторителе ACF

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