Как показать содержимое табов с использованием абсолютного позиционирования в Swiper Slider?

Для реализации блока категории в виде табов и обернуть его в слайдер с использованием Swiper Slider и абсолютного позиционирования, вам нужно выполнить следующие шаги:

1. Создайте контейнер для слайдера и табов. Например, используйте следующую структуру HTML:

```html
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- Содержимое первого таба -->
    </div>
    <div class="swiper-slide">
      <!-- Содержимое второго таба -->
    </div>
    <div class="swiper-slide">
      <!-- Содержимое третьего таба -->
    </div>
    <!-- Добавьте дополнительные слайды для остальных табов -->
  </div>
  <div class="swiper-pagination"></div>
</div>
```

2. Добавьте необходимые стили для контейнера слайдера и табов:

```css
.swiper-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.swiper-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
}

.swiper-slide-active {
  display: block;
}
```

3. Инициализируйте Swiper Slider после загрузки страницы и примените необходимые настройки:

```javascript
var swiper = new Swiper('.swiper-container', {
  // Установите необходимые настройки слайдера
  slidesPerView: 'auto',
  spaceBetween: 10,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  on: {
    slideChange: function() {
      // При смене слайда, скройте предыдущий активный слайд и покажите текущий активный слайд
      var activeSlide = this.slides[this.activeIndex];
      var prevSlide = this.slides[this.previousIndex];
      prevSlide.style.display = 'none';
      activeSlide.style.display = 'block';
    }
  }
});
```

4. Теперь вы можете добавлять необходимый контент внутри каждого слайда и Swiper Slider позволит вам переключаться между табами.

Надеюсь, это помогло вам реализовать блок категории в виде табов с использованием Swiper Slider и абсолютного позиционирования.

Воспользуйтесь библиотекой tippyjs вызывая ее следующим образом: appendTo: () => document.body. Таким образом, контент будет добавлен поверх всего сайта. 

 

Относительно структуры кода, вы можете оставить слайдер в виде списка ul>li и каждый li обернуть в .swiper-slide. В данном случае, li должны быть вложены в ul как показано ниже:


    

    

    



Вы также можете использовать другой подход, где каждый li будет обернут в .swiper-slide> div>button, но в данном случае структура будет выглядеть следующим образом: