Swiper Slider, как запустить 2-3-4 слайдера с одним и тем же классом?

Question

makboriska @makboriska

Swiper Slider, как запустить 2-3-4 слайдера с одним и тем же классом?

Есть цикл на php, в нем есть слайдер, а точнее два штуки (большая картинка и маленькая), при создании ещё одного элемента в цикле (post), создается ещё slider с таким же классом, но он перестает работать и первый. Как решить задачу? Что бы не вызывать в js их по одному?

Искал инфу, везде пишут добавь класс свой для следующего слайдера и вызови его, но я не знаю сколько будет слайдеров, их может быть 5-6-7-8...

Вот вызов слайдеров

var swiper = new Swiper(".mySwiper", {
          loop: false,
          spaceBetween: 10,
          freeMode: true,
          allowTouchMove: false,
          observeParents: true,
          observe: true,
          watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
          loop: false,
          allowTouchMove: false,
          spaceBetween: 10,
          observeParents: true,
          observe: true,
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
          thumbs: {
            swiper: swiper,
          },
        });

вот разметка и php

<div class="two-sliders">
                                        <div class="swiper mySwiper2">
                                            <div class="swiper-wrapper">
                                                <?php
                                                foreach( $main_repeator as $rep_one ):
                                                    foreach ( $rep_one['рацион'] as $rep_two ):
                                                        $img = $rep_two['img'];
                                                        ?>
                                                        <div class="swiper-slide" style="user-select: none;">
                                                            <img src="<?= $img; ?>" alt="">
                                                        </div>
                                                    <?php
                                                    endforeach;
                                                endforeach;
                                                ?>
                                            </div>
                                            <div class="swiper-button-next swiper-button-next3"></div>
                                            <div class="swiper-button-prev swiper-button-prev3"></div>
                                        </div>
                                        <div class="swiper mySwiper">
                                            <div class="swiper-wrapper">
                                                <?php
                                                $main_repeator = get_field('day');
                                                foreach( $main_repeator as $rep_one ):
                                                    foreach ( $rep_one['рацион'] as $rep_two ):
                                                        $img = $rep_two['img'];
                                                        $name = $rep_two['name'];
                                                        $kkal = $rep_two['kkal'];
                                                        $bel = $rep_two['б'];
                                                        $zh = $rep_two['ж'];
                                                        $ug = $rep_two['у'];
                                                        ?>
                                                        <div class="swiper-slide">
                                                            <img src="<?= $img; ?>" alt="">
                                                            <p class="swptext"><?= $name; ?></p>
                                                            <div class="bjy bjy1">
                                                                <div class="bjy-item">
                                                                    <p><?= $kkal; ?></p>
                                                                    <p>ккал</p>
                                                                </div>
                                                                <div class="bjy-item">
                                                                    <p><?= $bel; ?></p>
                                                                    <p>ккал</p>
                                                                </div>
                                                                <div class="bjy-item">
                                                                    <p><?= $zh; ?></p>
                                                                    <p>ккал</p>
                                                                </div>
                                                                <div class="bjy-item">
                                                                    <p><?= $ug; ?></p>
                                                                    <p>ккал</p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    <?php
                                                    endforeach;
                                                endforeach;
                                                ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>

(тут без цикла просто html)