@makboriska

Как создать два слайдера Swiper на одной странице?

Есть слайдер который находится внутри цикла (php).
Если слайд один, то все нормально работает.

Если слайдов больше одного то ругается:

thumbs.js:86 Uncaught TypeError: Cannot read properties of null (reading '$el')
    at n (thumbs.js:86:26)
    at H.<anonymous> (thumbs.js:203:5)
    at events-emitter.js:95:24
    at Array.forEach (<anonymous>)
    at events-emitter.js:94:37
    at Array.forEach (<anonymous>)
    at H.emit (events-emitter.js:87:17)
    at H.init (core.js:496:12)
    at new H (core.js:226:14)
    at HTMLDivElement.<anonymous> (core.js:68:22)


Вот html

<div thumbsSlider="" class="swiper mySwiperrrrrr4">
                                                    <div class="swiper-wrapper">
                                                        <?php
                                                        // check for rows (sub repeater)
                                                        if( have_rows('рацион') ): ?>
                                                            <?php

                                                            // loop through rows (sub repeater)
                                                            while( have_rows('рацион') ): the_row();

                                                                // display each item as a list - with a class of completed ( if completed )
                                                                ?>
                                                                <div class="swiper-slide">
                                                                    <img src="<?php echo get_sub_field('img'); ?>" alt="">
                                                                    <p class="swptext"><?php echo get_sub_field('name'); ?></p>
                                                                    <div class="bjy bjy<?php echo get_sub_field('пп'); ?>">
                                                                        <div class="bjy-item">
                                                                            <p><?php echo get_sub_field('kkal'); ?></p>
                                                                            <p>калл</p>
                                                                        </div>
                                                                        <div class="bjy-item">
                                                                            <p><?php echo get_sub_field('б'); ?></p>
                                                                            <p>Белки</p>
                                                                        </div>
                                                                        <div class="bjy-item">
                                                                            <p><?php echo get_sub_field('ж'); ?></p>
                                                                            <p>Жиры</p>
                                                                        </div>
                                                                        <div class="bjy-item">
                                                                            <p><?php echo get_sub_field('у'); ?></p>
                                                                            <p>Углеводы</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            <?php endwhile; ?>
                                                        <?php endif; //if( get_sub_field('items') ): ?>

                                                    </div>
                                                </div>

А вот js
var swiperrrrrr4 = new Swiper(".mySwiperrrrrr4", {
          loop: false,
          spaceBetween: 10,
          freeMode: true,
          allowTouchMove: false,
          watchSlidesProgress: true,
        });
        var swiper2 = new Swiper(".mySwiper2", {
          loop: false,
          allowTouchMove: false,
          spaceBetween: 10,
          observeParents: true,
          nested: true,
          observe: true,
          navigation: {
            nextEl: ".swiper-button-next3",
            prevEl: ".swiper-button-prev3",
          },
          thumbs: {
            swiper: swiperrrrrr4,
          },
        });


Я так понял он ругается что thumbs на странице больше одного, но как по другому если это цикл php?
  • Вопрос задан
  • 1480 просмотров
Решения вопроса 1
@makboriska Автор вопроса
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы