Как перелистывать списки в swiper?

Question

[Дарья ннн]

у меня есть 5 списков swiper-wrapper в каждом 5 слайдов, мне нужно чтобы отображался на странице 1 список со всеми 5 swiper-slide, при перелистывание перелистывался целый список. Нужно чтобы показывался 1 и менялся он при перелистывание, остальные 4 должны быть скрыты в это время, как это написать в js???????????

<div class="category__slider swiper">
  <ul class="category__list swiper-wrapper">
    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
  </ul>
  <ul class="category__list swiper-wrapper">
    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
  </ul>
  <ul class="category__list swiper-wrapper">
    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
  </ul>
  <ul class="category__list swiper-wrapper">
    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
  </ul>
  <ul class="category__list swiper-wrapper">
    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>

    <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
 <li class="category__slide swiper-slide">
            <article class="product-card">
                ...
            </article>
        </li>
  </ul>
</div>

const swiper = new Swiper('.swiper', {
?????
});

Comments

[Виталий Першин]

Это называется табы, гугл в помощь

[Ankhena]

Я не поняла.
Если 5 элементов перелистываются одновременно, почему кадрами вы считаете их, а не списки?

[Дарья ннн]

Ankhena, что не понятно? мне нужно чтобы отображался на странице 1 список со всеми 5 swiper-slide, при перелистывание перелистывался целый список. написано же всё

[Ankhena]

Дарья ннн, отлично!
Начнем сначала.
Если перелистываются сразу 5, то их можно сделать одним swiper-slide

[Дарья ннн]

Ankhena, спасибо за подсказку))
мне уже помогли найти решение

[Ankhena]

Дарья ннн,

мне уже помогли найти решение

Тут два варианта:
Либо написать решение в ответы, чтобы вся эта история могла помочь кому-то ещё.
Либо просто удалить вопрос.

Иначе от него нет толку.

[Дарья ннн]

Ankhena, я не спрашивала у вас советов)

[Ankhena]

Дарья ннн, странная идея огрызаться в ответ на дельные советы. Тем более новичку на сервисе.