Swiper JS - 2 слайдера на странице

Не, тоже не то, причина не в этом оказывается. Причина не в ошибке кода, дело немного в другом оказалось. Слайдеры в табах, соответственно, изначально виден только один, а второй в скрытом блоке (display:none). Следующий слайдер не работает из-за того, что он скрыт изначально, поэтому не может нормально инициализироваться. Нашел одно решение (https://stackoverflow.com/questions/56980314/how-to-use-same-swiper-in-tabs), но оно не подходит, т.к. предназначены для табов, которые содержат один слайдер, а у нас их 2 (основной и миниатюры). Вот мой код.

<div id="tabs-section" class="tabs"" />
    <ul class="tab-head">
        <li>
            <a href="#tab-1" class="tab-link active">
                Tab 1
            </a>
        </li>
        <li>
            <a href="#tab-2" class="tab-link">
                Tab 2
            </a>
        </li>
    </ul>
    <section id="tab-1" class="tab-body entry-content active active-content">
        <div>
            <div class="swiper mySwiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 1</div>
                    <div class="swiper-slide">Slide 2</div>
                    <div class="swiper-slide">Slide 3</div>
                    <div class="swiper-slide">Slide 4</div>
                    <div class="swiper-slide">Slide 5</div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
            <div thumbsSlider="" class="swiper mySwiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Thumb 1</div>
                    <div class="swiper-slide">Thumb 2</div>
                    <div class="swiper-slide">Thumb 3</div>
                    <div class="swiper-slide">Thumb 4</div>
                    <div class="swiper-slide">Thumb 5</div>
                </div>
            </div>
        </div>
        <div>
    </section>
    <section id="tab-2" class="tab-body entry-content">
        <div>
            <div class="swiper mySwiper4">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Slide 11</div>
                    <div class="swiper-slide">Slide 21</div>
                    <div class="swiper-slide">Slide 31</div>
                    <div class="swiper-slide">Slide 41</div>
                    <div class="swiper-slide">Slide 51</div>
                </div>
                <div class="swiper-button-next sec-slider-next"></div>
                <div class="swiper-button-prev sec-slider-prev"></div>
            </div>
            <div thumbsSlider="" class="swiper mySwiper3">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">Thumb 11</div>
                    <div class="swiper-slide">Thumb 21</div>
                    <div class="swiper-slide">Thumb 31</div>
                    <div class="swiper-slide">Thumb 41</div>
                    <div class="swiper-slide">Thumb 51</div>
                </div>
            </div>
        </div>
        <div>
    </section>
</div>

<script>
    var swiper = new Swiper(".mySwiper", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper2 = new Swiper(".mySwiper2", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      thumbs: {
        swiper: swiper,
      },
    });
        var swiper3 = new Swiper(".mySwiper3", {
      spaceBetween: 10,
      slidesPerView: 4,
      freeMode: true,
      watchSlidesProgress: true,
    });
    var swiper4 = new Swiper(".mySwiper4", {
      spaceBetween: 10,
      navigation: {
        nextEl: ".sec-slider-next",
        prevEl: ".sec-slider-prev",
      },
      thumbs: {
        swiper: swiper3,
      },
    });
</script>

Помог добрый человек с одного форума, за что ему огромная благодарность. Возможно, кто-то столкнется с такой же проблемой, поэтому выложу здесь рабочий вариант.

Swiper JS слайдер с миниатюрами внутри табов:

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .swiper {
            width: 600px;
            height: 300px;
            border: 1px solid red;
        }
        section {
            display: none;
        }
        section.active {
            display: block;
        }
        .tab-link.active {
            background-color: #FFD700;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    <script>
        window.addEventListener("load", function() {
            const tabs = [...document.querySelectorAll(".tab-body")];
            for (const tab of tabs) {
                tab.classList.add("active");
                const divs = [...tab.querySelectorAll(".swiper")];
                const swiper = new Swiper(divs[1], {
                    spaceBetween: 10,
                    slidesPerView: 4,
                    freeMode: true,
                    watchSlidesProgress: true,
                });
                new Swiper(divs[0], {
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev'
                    },
                    thumbs: {
                        swiper: swiper
                    }
                });
                tab.classList.remove("active");
            }
            tabs[0].classList.add("active");
        })
    </script>
</head>
<body>
    <ul class="tab-head">
        <li>
            <a href="#tab-1" class="tab-link active">
                Tab 1
            </a>
        </li>
        <li>
            <a href="#tab-2" class="tab-link">
                Tab 2
            </a>
        </li>
    </ul>
    <section id="tab-1" class="tab-body entry-content active">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Thumb 1</div>
                <div class="swiper-slide">Thumb 2</div>
                <div class="swiper-slide">Thumb 3</div>
                <div class="swiper-slide">Thumb 4</div>
                <div class="swiper-slide">Thumb 5</div>
            </div>
        </div>
    </section>
    <section id="tab-2" class="tab-body entry-content">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Slide2 1</div>
                <div class="swiper-slide">Slide2 2</div>
                <div class="swiper-slide">Slide2 3</div>
                <div class="swiper-slide">Slide2 4</div>
                <div class="swiper-slide">Slide2 5</div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">Thumb2 1</div>
                <div class="swiper-slide">Thumb2 2</div>
                <div class="swiper-slide">Thumb2 3</div>
                <div class="swiper-slide">Thumb2 4</div>
                <div class="swiper-slide">Thumb2 5</div>
            </div>
        </div>
    </section>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let elem = document.querySelector(".tab-head");
            elem.addEventListener("click", function({
                target
            }) {
                if (target.closest(".tab-link")) {
                    elem.querySelector(".tab-link.active").classList.remove("active");
                    target.classList.add("active");
                    const id = target.getAttribute("href");
                    document.querySelector(".tab-body.active").classList.remove("active");
                    document.querySelector(id).classList.add("active");
                };
            })
        })
    </script>
</body>
</html>

Ну да, решение очевидное в общем-то:

tab.classList.add("active");
tab.classList.remove("active");
tabs[0].classList.add("active");

То есть делаем вкладку активной, инициируем слайдер, и снова закрываем вкладку. А в конце открываем дефолтную вкладку.